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数字 版 权 声 明 


图 灵 社 区 的 电子 书 没有 采用 专 有 客 
户 端 ， 您 可 以 在 任意 设备 上 ， 用 自 
己 喜 欢 的 浏览 器 和 PDF 阅读 器 进行 
阅读 。 

但 您 购买 的 电子 书 仅 供 您 个 人 使 
用 ， 未 经 授权 ， 不 得 进行 传播 。 
我 们 愿意 相信 读者 具有 这 样 的 良知 
和 觉悟 ， 与 我 们 共同 保护 知识 产 
权 。 

如 果 购 买 者 有 侵权 行为 ， 我 们 可 能 
对 该 用 户 实施 包括 但 不 限于 关闭 该 
帐号 等 维权 措施 ， 并 可 能 追究 法 律 
责任 。 





井上 诚 一 郎 

曾 在 美国 参与 过 Lotus Notes 的 开发 ， 后 在 日 本 
直立 了 Ariel Network 股 份 公司 , 任 CTO。 目前 从 
面向 企业 的 PSP 软 件 及 企业 产品 的 开发 。 著 
《PSP 教 科 书 》、《Java 编 程 详解 》、《 实 践 
JS;: 服务 器 端 JavaScript 入 门 》 等 书 。 
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土 江 拓 郎 
2008 年 加 入 Ariel Network 股 份 公司 。 从 事 Java 
及 JavaScript 相 关 的 企业 产品 开发 工作 。 


滨 边 将 太 
2009 年 加 入 雅虎 公司 ， 从 事 针 对 电视 的 软 键盘 
开发 ， 以 及 智能 手机 应 用 GyaO1! 的 开发 。 


陈 签 烟 
毕业 于 复旦 大 学 计算 机 科学 与 技术 系 ， 主 要 研 
究 方 向 为 跨 设 备 人 机 交互 理论 。 长 期 从 事 对 日 
软件 外 包工 作 。 从 大 学 时 期 开始 接触 并 使 用 
Java、JavaScript 进 行程 序 开 发 ， 现 在 对 Web 
应 用 及 智能 手机 应 用 的 开发 很 感 兴趣 。 
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版 权 声 明 


PERFECT JavaSript by Seiichiro Inoue, Takuro Tsuchie, Shota Hamabe 
Copyright 2011 Seiichiro Inoue, Takuro Tsuchie, Shota Hamabe 

All rights reserved. 

Original Japanese edition published by Gijyutsu-Hyoron Co., Ltd., Tokyo 


This Simplified Chinese language edition published by arrangement with 
Gijyutsu-Hyoron Co., Ltd., Tokyo in care of Tuttle-Mori Agency, Inc., Tokyo 


本 书 中 文人 简体 字 版 由 Gijyutsu-Hyoron Co., Ltd. 授权 人 民 邮 电 出 版 社 独家 出 版 。 未 
经 出 版 者 书面 许可 ， 不 得 以 任何 方式 复制 或 抄袭 本 书 内 容 。 
版 权 所 有 ， 侵 权 必 究 。 
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书 所 记述 的 内 容 ， 仅 仅 是 作者 向 读者 提供 的 信息 ， 因 此 ， 读 者 对 本 书 内 容 的 使 用 ， 其 自身 的 判断 ， 
切 责 任 自负 。 对 于 使 用 本 书 内 容 所 造成 的 结果 ， 技 术 评 论 社 、 原 书 作者 、 人 民 邮 电 出 版 社 以 及 译 者 ， 概 
不 负责 。 

@ 本 书 内 容 依 据 2011 年 8 月 30 日 的 情况 所 写 ， 因 此 在 阅读 本 书 时 ， 个 别 内 容 可 能 已 经 发 生 了 更 改 。 对 
部 分 变更 , 已 经 附 上 了 译 者 注 ， 帮 助 读者 理解 。 关于 书 中 出 现 的 软件 信息 ， 如 无 特别 说 明 ， 均 以 2011 年 
8 月 30 日 的 最 新 版 为 准 。 在 软件 版 本 升级 之 后 ， 其 功能 与 界面 可 能 会 与 本 书 中 的 说 明 有 所 差异 。 在 购买 
本 书 前 ， 请 务必 确认 软件 版 本 号 。 

@ 本 书 内 容 及 其 收录 的 范例 代码 ,已 确认 能 够 在 以 下 环境 中 运行 。 
操作 系统 Windows 7 Professional 64 位 版 
浏览 曙 Internet Explorer / Firefox / Google Chrome 

在 除 此 之 外 的 环境 中 使 用 时 ， 操 作 方法 、 软 件 界面 以 及 程序 的 执行 方式 可 能 会 与 本 书 的 记述 有 所 不 同 ， 

敬 请 谅解 。 

请 在 理解 以 上 这 些 注意 事项 的 基础 上 使 用 本 书 。 
@ 可 以 在 下 面 的 站 点 中 找到 本 书 的 支持 信息 ( 日 文 )。 
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※ 本 书 中 介绍 的 商品 名 称 ， 都 是 各 相关 公司 的 商标 或 注册 商标 。 
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首先 感谢 您 购买 本 书 。 

这 是 一 本 关于 JavaScript 程序 设计 语言 的 书 。 本 书 的 前 半 部 分 将 对 JavaScript 的 语言 基础 进行 
解说 ， 而 后 半 部 分 主要 介绍 包括 客户 端 JavaScript、HTML5、Web API 以 及 服务 器 JavaScript 等 与 
JavaScript 相关 的 应 用 领域 。 

本 书面 向 有 一 定编 程 基 础 的 开发 者 ， 因 此 书 中 的 JavaScript 代码 都 只 取 了 片段 。 希 望 通过 复制 粘 
贴 来 使 用 这 些 代 码 的 读者 ， 在 阅读 本 书 时 或 许 会 感到 有 些 困难 。 此 外 ， 本 书 中 没有 涉及 网 页 设计 和 
] 户 体验 的 内 容 ， 如 果 只 是 希望 学 习 和 网 页 显示 效果 有 关 的 JavaScript 知识 ， 阅 读本 书 并 不 合适 。 

本 书 的 目标 读者 是 希望 深入 学 习 JavaScript 并 开发 完整 的 Web 应 用 程序 的 人 。 那 些 平时 主要 使 
用 Java 或 是 PHP 等 其 他 语言 的 开发 者 ， 有 时 也 会 遇 到 一 些 不 得 不 使 用 JavaScript 语言 的 情况 。 对 于 
这 些 开发 者 来 说 ， 如 果 你 抱 有 “既然 要 使 用 JavaScript， 就 应 该 学 习 正 确 的 语言 规范 以 写 出 良好 代码 ” 
的 想法 ， 也 推荐 你 阅读 本 书 。 

如 果 和 希望 理解 JavaScript 的 语言 基础 ， 请 阅读 本 书 的 第 2 部 分 。 为 了 让 没有 接触 过 程序 设计 语言 
的 人 也 能 理解 ， 本 书 着 实 下 了 一 番 功 夫 。 虽 然 其 中 包含 了 不 少 和 Java 对 比 的 内 容 ， 不 过 只 要 按 顺 序 
认真 阅读 ， 初 学 者 也 不 会 感到 吃力 。 

从 第 3 部 分 开始 本 书 将 介绍 JavaScript 的 应 用 ， 其 中 还 包括 HTML5 和 Node.js 等 热门 的 新 技术 。 
其 实 ， 如 果真 要 理性 地 评价 JavaScript 这 门 程序 设计 语言 ， 我 们 会 发 现 它 并 不 具有 令 人 兴奋 的 特性 。 
虽然 JavaScript 在 其 看 似 平凡 的 外 表 之 下 有 着 复杂 的 内 部 构造 ， 但 它 确实 不 是 一 种 采用 了 计算 机 科学 
领域 最 新 技术 的 新 型 语言 。 事 实 上 ， 学 习 JavaScript 的 意义 与 其 说 是 为 了 学 习 这 门 语 言 本 身 ， 倒 不 如 
说 是 为 了 学 习 和 使 用 其 相关 领域 的 知识 。 近 年 来 ，JavaScript 相关 领域 的 发 展 着 实 令 人 着 迷 。 毫 不 奔 
张 地 说 ， 现 在 互联 网 的 新 热点 大 多 都 和 JavaScript 有 关 。 如 果 本 书 的 后 半 部 分 内 容 能 够 将 这 种 兴奋 感 
传达 给 各 位 读者 的 话 ， 我 将 感到 不 胜 薪 幸 。 













































































































































































































































































1 

















井上 诚 一 郎 
2011 年 8 月 31 日 





国 目 标 读者 

e 读 过 一 些 JavaScript 的 入 门 书籍 ， 希 望 进一步 了 解 JavaScript 本 质 的 人 。 

se 平时 虽然 常常 使 用 JavaScript， 但 还 没有 完全 理解 JavaScript， 并 因此 感到 有 些 信心 不 足 的 人 。 
e 虽 然 主要 使 用 其 他 的 程序 设计 语言 ， 但 有 时 也 会 使 用 JavaScript 的 人 。 

e 认 为 JavaScript 会 是 今后 的 主流 语言 的 人 。 
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2.3 变量 的 基础 … 
2.3.1 变量 的 使 
Fn 全 4 省 略 var - 
2.3.3 常量 - 
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3.4.5 调用 Number 函 数 … 
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3.4.8 

布尔 型 
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布尔 类 ( Boolean 类 ) 
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JavaScript 概要 


本 章 将 介绍 JavaScript 和 ECMAScript 的 关系 与 历史 ， 以 及 JavaScript 与 作为 其 实现 方式 和 
运行 环境 的 浏览 器 的 关系 ， 此 外 还 将 总 括 JavaScript 的 可 移植 性 。 


1.1 Javascript 概要 


我 们 首先 介绍 JavaScript 相 关 的 运行 环境 ， 其 语言 特征 会 在 第 2 部 分 详 述 。 正 在 读本 书 的 读者 ， 应 
该 都 知道 JavaScript 是 在 浏览 器 中 运行 的 语言 吧 。 其 至 可 以 说 ， 除 开发 者 以 外 ， 被 大 众 所 熟 知 的 程序 设 
计 语 言 也 许 只 有 JavaScript。 而 且 在 软件 史上 ， 以 能 够 在 各 种 环境 下 运行 而 著称 的 语言 中 ， 大 概 没有 比 
JavaScript 更 有 名 的 了 。 

但 是 ， 正 是 由 于 太 过 常见 ， 才 让 很 多 人 对 JavaScript 有 了 一 些 误 解 与 偏见 。 

例如 ， 因 为 和 浏览 器 的 关联 性 过 强 ， 很 多 人 都 以 为 JavaScript 只 能 在 浏览 器 中 和 运行。 对 JavaScript 的 看 
法 也 是 莫 瑞 一 是 。 有 人 认为 它 降低 了 Web 的 使 用 体验 ， 也 有 人 称赞 它 是 一 门 使 Web 的 易 用 性 得 以 进化 的 出 
色 的 技术 。 有 人 觉得 JavaScript 是 任何 人 都 可 以 学 会 的 简单 语言 ， 也 有 人 认为 它 过 于 抽象 ， 很 难 掌握 。 

对 JavaScript 的 看 法 各 有 不 同 ， 很 难说 哪 一 种 正确 。 不 过 ， 只 要 软件 以 Web 为 中 心 ,今后 JavaScript 
的 重要 性 就 一 定 会 进一步 提升 。JavaScript 领域 的 名 人 道格拉斯 。 克 罗 克 福 德 曾 把 JavaScript 称 为 Web 上 
的 虚拟 机 。 其 核心 含义 是 ， 在 JavaScript 广 为 普 及 的 现在 ，Web 已 经 成 为 了 JavaScript 事实 上 的 运行 环 
境 。 和 夸张 地 讲 ，JavaScript 正 日 益 成 为 支配 世界 的 程序 设计 语言 。 
虽说 JavaScript 已 被 逐渐 应 用 于 浏览 器 之 外 的 场合 ， 但 就 目前 而 言 ， 其 主 战 场 还 是 浏览 器 。 本 书 除 第 
6 部 分 之 外 ， 原 则 上 将 JavaScript 作为 在 浏览 器 中 运行 的 客户 端 语言 。 



















































































1.2 | JavaScript 的 历史 


JavaScript 于 1995 年 登场 ， 运 用 在 当时 最 流行 的 浏览 器 Netscape Navigator 中 。 在 此 之 前 ， 浏 览 器 只 
能 处 理 HTML 与 图 片 ， 而 JavaScript 使 得 浏览 器 端的 程序 运行 成 为 可 能 。 

能 够 在 浏览 器 中 运行 程序 ， 并 非 JavaScript 的 专利 。 其 先驱 是 另 一 门 著名 的 程序 设计 语言 Java， 主 要 
用 于 服务 器 端 。 当 初 被 称 为 JavaApplet 的 程序 由 于 可 以 在 浏览 器 ( HotJava ) 中 运行 而 广 受 瞩 目 。 

众所周知 ， 尽 管 Java 和 JavaScript 在 保留 字 和 关键 字 等 表层 范畴 上 很 相似 ， 但 作为 程序 设计 语言 ， 
它们 之 间 其 实 并 没有 什么 关系 。JavaScript 开发 得 较 晚 ， 开 发 之 初 的 名 称 是 LiveScript， 之 后 才 决 定 效仿 
已 经 颇 为 有 名 的 Java， 改 为 JavaScript。 虽 然 Java 和 JavaScript 的 命名 导致 了 许多 误解 ， 但 回顾 历史 ， 可 
以 说 这 是 一 种 正确 的 营销 手段 。 

稍微 了 解 一 下 语言 规则 就 会 发 现 ，Java 和 JavaScript 的 执行 方式 并 不 像 其 表面 那样 相似 。JavaScript 反而 
和 Ruby 或 Python 这 样 的 轻型 脚本 语言 ， 或 Lisp 之 类 的 以 函数 作为 主体 的 程序 设计 语言 更 为 相似 。 不 过 由 于 
早期 主要 是 跟随 Java 发 展 ， 因 此 JavaScript 的 对 象 名 以 及 方法 名 和 Java 比较 相似 。 
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国 Javascript 简 史 | 


在 此 ， 我 们 总 结 一 下 JavaScript 标准 的 制定 时 间 和 一 些 重要 事件 ( 表 1.1 )。ECMAScript 将 在 下 一 节 
中 进行 说 明 。 


表 1.1 JavaScript 简 史 
























































年 份 事件 

1995 年 ”| 网 景 公司 开发 了 JavaScrip 

1996 年 “| 微软 发 布 了 和 JavaScript 兼容 的 JScript 
1997 年 ECMAScript 第 1 版 (ECMA-262 ) 
1998 年 “| ECMAScript 第 2 版 

1998 年 “|DOM Level1 的 制定 

1998 年 新 型 语言 DHTML 登场 

1999 年 “|ECMAScript 第 3 版 

2000 年 DOM Level2 的 制定 

2002 年 ISO/IEC 16262:2002 的 确立 

2004 年 DOM Level3 的 制定 

2005 年 新 型 语言 AJAX 登场 

2009 年 ECMAScript 第 5 版 

2009 年 新 型 语言 HTML5 登场 




















最 初 ，JavaScript 所 获得 的 评价 并 不 都 是 正面 的 。 当 时 的 PC 性 能 很 弱 ，JavaScript 的 实现 也 不 够 成 
熟 ， 很 多 人 觉得 运行 了 JavaScript 的 页 面 会 变 得 十 分 缓慢 ， 浏 览 器 也 会 变 得 不 稳定 。 其 至 曾经 有 不 少 人 大 
力 呼吁 ， 应 该 在 浏览 器 中 取消 JavaScript。 

随 着 Web 使 用 的 普及 ， 要 求 改善 浏览 器 用 户 界 面 的 呼声 越 来 越 高 。 因 此 尽管 速度 不 快 ，JavaScript 的 重要 
性 还 是 在 逐步 提升 。 在 这 段 时 期 ， 网 景 公 司 以 及 微软 都 在 不 断 地 进行 技术 革新 ,微软 逐渐 取得 技术 上 的 领先 
地 位 。 由 微软 等 公司 提出 的 DHTML (动态 HTML ) 是 JavaScript 的 基础 。DHTML 是 一 种 为 了 推广 而 命名 的 
方便 说 法 ， 意 指 DOM 和 CSS 等 W3C 标准 与 JavaScript 相 结合 后 ， 所 能 提供 的 丰富 的 浏览 器 用 户 界 面 。 

就 这 样 ， 在 2000 年 前 后 ，JavaScript 相关 的 各 种 技术 基本 准备 就 绪 。2005 年 前 后 ，Web 应 用 得 到 广 
泛 普 及 。 特 别 是 出 现 了 以 谷歌 为 首 提出 的 异步 JavaScript ( 之 后 统称 为 AJAX， 即 Asynchronous JavaScript 
and XML )， 使 接近 桌面 应 用 的 复杂 用 户 界 面 得 以 实现 。 

在 Web 应 用 变 得 越 来 越 复 杂 的 过 程 中 ，JavaScript 的 代码 规模 与 复杂 性 也 日 益 提 升 ，prototype.js、 
jQuery 等 各 种 JavaScript 库 相 应 登场 。 可 以 说 ，2005 年 之 后 的 几 年 是 JavaScript 的 繁荣 期 。 

在 这 一 繁荣 期 中 ,还 有 另 一 个 不 能 忽视 的 成 员 ， 即 Mozilla 基金 会 (Mozilla Foundation )。Mozilla 
基金 会 的 历史 可 以 追随 到 网 景 公司 时 期 。Mozilla 的 发 展 历程 不 在 本 书 的 讲解 范畴 之 内 ， 在 此 略 去 ， 但 是 
Mozilla 的 开源 浏览 器 Firefox 的 坚实 发 展 所 带 来 的 JavaScript 的 速度 改善 ， 确 实 是 JavaScript 繁荣 的 一 大 主 
要 原因 。 说 到 JavaScript 的 性 能 提升 ， 谷 歌 在 2008 年 与 浏览 器 Google Chrome 一 同 发 布 的 JavaScript 引擎 
v8 也 是 一 个 重要 的 契机 。 在 此 之 后 ， 发 生 了 各 种 JavaScript 实现 方式 之 间 比 拼 速 度 的 状况 。 
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| 1.3 ECMASeript 





国 1.3.1 Javascript 的 标准 化 | 


上 节 提 到 ，JavaScript 是 由 网 景 公司 提出 的 。 之 后 ,微软 开 发 了 和 JavaScript 相 兼容 的 JScript 并 将 其 
于 Internet Explorer 中 。 不 过 ， 人 们 通常 将 两 者 统称 为 JavaScript。 
为 了 防止 因 两 家 公司 独自 开发 而 导致 JavaScript 分 裂 以 及 其 他 一 些 问题 ， 网 景 公 司 提出 了 名 为 Ecma 
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International 的 JavaScript 标准 化 组 织 。 这 一 标准 语言 的 名 称 就 是 ECMAScript。 由 于 将 语言 规则 的 制 
定 权 交 给 了 中 立 的 标准 化 组 织 ， 网 景 公司 放弃 了 对 JavaScript 的 垄断 地 位 ，JavaScript 因此 具备 了 标准 
化 程序 设计 语言 所 必须 的 安定 感 。 对 于 开发 者 来 说 ， 标 准 的 程序 设计 语言 不 会 随 特定 企业 的 想法 而 轻 
易 改 变 ， 也 更 令 人 安心 。 这 是 因为 如 果 一 种 语言 由 某 一 企业 所 控制 ， 可 能 会 发 生 开发 终止 或 是 需要 收 
费 使 用 的 情况 。 

ECMAScript 的 标准 编号 是 ECMA-262， 并 在 之 后 获得 了 ISO 的 承认 (ISO-16262 )。 通 俗 来 讲 ， 就 
是 得 到 了 ISO 的 权威 认证 。 根 据 ECMAScript 标准 ， 网 景 公司 的 JavaScript 被 重新 定义 为 一 种 符合 
ECMAScript 标准 的 程序 设计 语言 。 微 软 的 JScript 亦 然 。 即 使 之 后 JavaScript 的 开发 主体 由 网 景 公 司 变 为 
了 Mozilla 基金 会 ， 这 一 定义 也 没有 改变 。 

之 后 还 出 现 了 其 他 ECMAScript 的 具体 实现 ， 不 过 现在 都 将 它们 统称 为 JavaScript 实现 。 严 格 来 说 ， 上 应 
网 景 公 司 开发 、 现 由 Mozilla 基金 会 继续 发 展 的 语言 称 为 JavaScript， 其 他 ECMAScript 标准 的 实现 方式 称 为 
JavaScript 的 兼容 实现 方式 。 不 过 这 样 区 分 的 意义 并 不 大 ， 所 以 本 书 将 这 些 统称 为 JavaScript 实现 方式 。 目 
前 ， 具 代表 性 的 JavaScript 实现 方式 一 方面 以 标准 为 主 ， 一 方面 也 在 独立 发 展 。 也 就 是 说 ， 它 们 在 提供 了 
ECMAScript 功能 的 基础 上 ， 继 续 提 供 其 他 便捷 功能 。 事 实 上 ，JavaScript 的 具体 实现 大 部 分 都 是 ECMAScript 
的 超 集 。 因 此 ， 如 果 要 保证 可 移植 性 ， 只 要 做 到 在 代码 中 仅 使 用 ECMAScript 标准 所 包含 的 功能 即 可 。 










































































































































































国 1.3.2 被 放弃 的 ECMAScript 第 4 版 | 
表 1.1 (JavaScript 简 史 ) 中 并 没有 ECMAScript 第 4 版 ， 这 是 因为 ECMAScript 第 4 版 没 能 符合 要 求 
而 最 终 被 放弃 了 。 





I 


ECMAScript 第 3 版 是 在 1999 年 提出 的 。 一 方面 可 以 说 JavaScript 在 10 年 间 保 持 了 稳定 不 变 , 但 
男 一 方面 也 意味 着 它 的 标准 止 于 10 年 之 前 , 已 经 停止 了 前 进 。 一 般 来 说 ，1999 以 后 的 ECMAScript 第 
3 版 以 及 JavaScript 1.5 版 被 作为 默认 标准 ， 即 使 JavaScript 增加 了 新 功能 也 被 视 为 增强 功能 。 官 方 的 意见 
是 为 了 与 标准 相 兼容 ， 不 应 该 使 用 新 功能 。 标 准 化 有 积极 的 一 面 ， 但 同时 又 由 于 其 发 展 过 于 缓慢 ， 导 致 
了 JavaScript 的 具体 实现 往往 增加 了 很 多 独 有 功能 ， 造 成 了 代码 可 移植 性 降低 的 不 良 后 果 。 

在 大 约 10 年 的 时 间 里 (1999 年 至 2008 年 )，ECMAScript 第 4 版 的 制定 工作 一 直 在 进行 ， 原本 计划 
向 业已 规范 有 序 的 标准 中 进一步 加 入 大 量 增强 功能 。 在 第 4 版 中 甚至 有 引入 “类 ”的 概念 这 样 大 胆 的 标 
准 变更 计划 。 然 而 ，2008 年 的 标准 化 工作 大 会 放弃 了 大 幅度 变更 标准 的 计划 ， 转 为 在 第 3 版 的 基础 上 进 
行 渐进 式 改进 。 于 是 ， 在 2009 年 直接 发 布 了 和 第 3 版 标准 差异 不 大 的 第 5 版 。 
由 于 ECMAScript 第 5 版 的 保守 ，JavaScript 1.6 版 中 很 多 新 增 功能 的 处 境 也 变 得 微妙 起 来 。 虽 然 
其 中 也 有 一 些 功能 仍然 被 ECMAScript 第 5 版 采用 ， 但 其 大 部 分 都 没 能 被 接受 。 因 此 ， 虽 说 只 要 遵循 
ECMAScript 标准 依然 可 以 随意 使 用 ， 但 JavaScript 1.6 版 实际 上 成 为 了 一 种 独立 的 JavaScript 增强 版 本 。 
总 之 ， 如 果 要 遵循 标准 或 是 保证 可 移植 性 的 话 ， 就 不 应 该 使 用 那些 功能 。 

























































































































































































1.4 | JavaScript 的 版 本 


正如 上 一 节 所 讲 ，JavaScript 是 一 种 符合 ECMAScript 标准 的 程序 设计 语言 。 而 事实 上 ， 往 往 是 先 由 
JavaScript 实现 某 一 功能 ，ECMAScript 才 对 其 进行 标准 化 处 理 。 由 于 历史 原因 ，Mozilla 基金 会 所 开发 的 
JavaScript (严格 意义 上 的 真正 的 JavaScript ) 常常 会 在 标准 化 之 前 就 加 入 一 些 新 功能 。 

JavaScript 版 本 和 ECMAScript 版 本 的 对 应 关系 如 表 1.2 所 示 。 
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表 1.2” ”JavaScript 的 版 本 
















































































JavaScript 版 本 最 早 采用 该 版 本 的 浏览 器 版 本 ECMAScript 标准 
40 avigator 2.0 一 
证 avigator 3.0 以 此 为 基础 开始 了 ECMAScript 的 标准 化 
1 avigator 4.0-4.05 大 致 相当 于 第 1 版 标准 
ie avigator 4.06—4.7x 第 1 版 标准 
1.4 一 第 1 版 标准 
1.5 avigator 6.0，Mozilla 第 3 版 标准 
1.6 Firefox 1.5 相当 于 ECMAScript 第 4 版 的 先行 版 
入 Firefox 2 相当 于 ECMAScript 第 4 版 的 先行 版 
1.8 Firefox 3 相当 于 ECMAScript 第 4 版 的 先行 
1.8.1 Firefox 3.5 大 致 相当 于 第 5 版 标准 
1.8.5 Firefox 4.0 第 5 版 标准 

1.5 JavaScript 实现 方式 








表 1.3 列 出 了 搭载 了 JavaScript 引擎 的 具有 代表 性 的 浏览 器 。 虽 说 这 几 年 给 每 个 版 本 附 上 一 个 开发 代 
号 的 做 法 很 流行 ， 不 过 在 这 里 还 是 使 用 各 自 的 通称 。 























表 1.3 浏览 器 和 JavaScript 实现 方式 




















浏览 器 JavaScript 实现 方式 

FireFox SpiderMonkey 

Internet Explorer JScript 

Safari JavaScriptCore 

Chrome v8 

Carakan Carakan ( 最 新 版 的 开发 代号 ) 


























[| 客户 端 JavaScript 代码 的 可 移植 性 | 


JavaScript 编程 中 有 一 个 很 麻烦 的 问题 ， 即 在 不 同 的 浏览 器 中 其 执行 方式 会 有 所 不 同 。1.2 节 中 曾 提 
到 JavaScript 早期 的 评价 并 不 太 好 ， 其 中 一 个 很 重要 的 原因 就 是 ，JavaScript 在 不 同 的 浏览 器 中 的 执行 方 
式 的 确 会 有 差别 。 许 多 开发 者 怨 声 不 断 ， 逐 渐 造 成 了 一 种 JavaScript 编程 非常 麻烦 的 印象 。 但 如 果 冷 静 下 
来 思考 一 下 ， 就 会 发 现 JavaScript 其 实 并 没有 所 说 的 那么 夸张 。 

稍 加 了 解 就 会 发 现 ，C/C++ 等 其 他 一 些 语言 ， 和 如 今 的 JavaScript 一 样 ， 都 衍生 出 了 多 种 不 同 的 实 
现 方式 ”。 它 们 虽然 在 遵循 语言 标准 时 ， 能 够 实现 一 定 程度 的 可 移植 性 ， 但 对 于 不 同 平台 (OS ) 的 情况 ， 
其 可 移植 性 完全 无 法 令 人 满意 。PHP、Perl 、Python 、Ruby 等 流行 的 脚本 语言 虽然 在 不 同 平台 间 也 有 着 
很 高 的 可 移植 性 ， 但 这 是 因为 它们 基本 上 只 有 唯 种 实现 方式 。Java 确实 有 多 种 实现 方式 ， 也 实现 了 
很 强 的 可 移植 性 ， 不 过 这 是 由 于 它 最 初 就 在 保证 可 移植 性 上 花费 了 很 大 的 精力 ， 所 以 算是 一 个 例外 。 把 
JavaScript 和 Java 作对 比 来 得 出 其 可 移植 性 不 强 未 免 有 些 不 妥 。 

影响 客户 端 JavaScript 可 移植 性 的 原因 主要 有 两 点 。 

@ JavaScript 语言 实现 方式 的 不 同 

@ 演 染 引擎 的 差别 ( DOM 或 是 CSS 的 解释 不 同 ) 


在 实际 中 ， 后 者 更 为 麻烦 ， 并 由 此 产生 了 许多 不 良 开 发 方式 。 要 解决 JavaScript 语言 实现 方式 差异 的 
关键 在 于 ECMAScript， 因 为 ECMAScript 作为 一 种 标准 ， 有 明确 的 规定 。 现 在 大 多 数 有 名 的 JavaScript 
































































































































中 不 过 ，C++ 的 支持 者 们 持 有 不 同意 见 。 由 于 本 书 只 关注 JavaScript， 所 以 对 此 不 做 深究 。 
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由 


实现 都 基于 ECMAScript 标准 ， 所 以 只 要 书写 符合 ECMAScript 标准 的 代码 ， 就 能 够 在 很 大 程度 上 提高 可 
移植 性 。 
另 一 方面 ， 泻 染 引擎 没 有 像 程 序 设计 语言 一 样 被 标准 化 ， 所 以 相当 难 办 。 不 过 有 一 个 被 称 为 Acid 的 
测试 ， 可 以 ee tli 题 。 
http://www.webstardards.org/action/acid3/ 


Acid 并 不 像 ECMAScript 那样 有 明确 标准 ， 它 会 对 浏览 器 进行 特定 测试 ， 根 据 返 回 的 结果 是 否 相 同 
来 判断 代码 的 执行 情况 。 该 测试 可 以 用 于 判断 JavaScript、DOM 、CSS 等 各 种 客户 端 JavaScript 的 执行 情 
况 。 现 在 很 多 的 浏览 器 都 以 符合 Acid 标准 ( 即 可 以 通过 Acid 测试 ) 为 目标 。 在 执笔 本 书 时 ，Acid 的 版 
本 号 为 3。 用 浏览 器 登录 下 面 的 URL 地 址 就 能 够 获得 测试 得 分 : 

http://acid3.acidtests.org/ 


刚刚 已 经 介绍 了 有 关 客 户 端 JavaScript 可 移植 性 改进 的 内 容 。 很 可 惜 ， 情 况 尚 不 乐观 。 首 先是 浏览 器 
版 本 陈旧 的 问题 。 之 前 提 到 的 ECMAScript 标准 以 及 Acid 测试 标准 都 是 基于 最 新 版 本 的 浏览 器 的 。 如 果 
需要 支持 旧版 本 的 浏览 融 ， 则 仍然 要 注意 执行 方式 上 的 差异 。 

男 一 个 问题 是 对 PC 之 外 的 设备 的 支持 。 如 今 的 智能 手机 、 平 板 电脑 以 及 智能 电视 ， 原 本 就 有 着 不 
同 的 用 户 界面 。 昌 说 客户 端 JavaScript 的 可 移植 性 确实 在 逐渐 提高 ， 但 如 果 考 虑 到 现在 越 来 越 普 及 的 非 
PC 设备 的 情况 ， 可 以 说 现在 正 处 于 一 种 过 去 未 曾 有 过 的 混乱 状态 。 所 和 幸 非 PC 设备 的 泻 染 引擎 基本 上 被 
WebKit 所 垄断 ， 总 算 使 问题 稍 有 缓解 。 



































































































































1.6 | JavaScript 运行 环境 


转 1.6.1 核心 语言 | 


由 于 人 们 对 JavaScript 的 印象 大 多 都 是 客户 端 JavaScript， 所 以 常 认 为 JavaScript 编程 和 DOM 编程 是 
不 可 分 制 的 。 

简单 说 来 ，DOM 编程 就 是 浏览 器 和 用 户 之 间 的 接口 ， 可 以 在 浏览 器 上 显示 内 容 或 是 反馈 用 户 的 点 击 
操作 。 本 书 第 3 部 分 将 会 对 此 做 进一步 详 述 。 尽 管 在 浏览 器 上 两 者 的 联系 紧密 ， 但 JavaScript 和 DOM 并 
不 是 不 可 分 割 的 ， 它 们 的 语言 标准 相互 独立 。DOM 对 客户 端 JavaScript 来 说 ， 仅仅 是 一 宿主 对 象 。 大 家 
对 宿主 对 象 一 词 可 能 并 不 熟悉 ， 只 要 把 它 理 解 为 类 似 于 其 他 程序 设计 语言 的 外 部 库 的 概念 即 可 ， 也 就 是 
语言 中 可 以 更 换 的 部 分 。 而 核心 语言 则 是 特 指 JavaScript 中 不 可 被 替代 的 功能 。 

JavaScript 的 核心 语言 和 宿主 对 象 的 概念 如 下 图 所 示 (图 1.1 )。 


| 图 1.1 Web 应 用 程序 的 组 成 结构 































































































客户 端 服务 器 端 浏览 器 扩展 
DOM 主 
内 置 宿主 对 象 宿主 对 象 
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JavaScript 核心 语言 内 建 对 象 
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转 1.6.2 


宿主 对 象 
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如 图 1.1 所 示 ，JavaScript 中 对 于 不 同 的 运行 环境 ， 有 着 不 同 的 内 置 宿 主 对 象 。 这 是 由 于 JavaScript 
开发 者 必须 自己 开发 运行 时 的 上 下 文 环境 。 





是 被 作为 一 种 扩展 语言 而 设计 的 。 对 于 i 
正 因 如 此 ， 那 些 语言 才 有 了 通用 程序 设计 语言 的 名 称 。 男 一 方 
中 运行 程序 的 。 宿 主 应 用 
对 象 作为 根 节 点 的 对 象 树 的 
就 被 称 为 宿 





(宿主 环境 ) 
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对 象 。 





程序 设计 语言 ， 


























看 ， 扩 展 语 言 是 在 内 建 对 象 的 应 用 程序 


程序 会 在 这 时 收 到 一 些 运行 时 的 上 下 文 信息 。JavaScript 会 以 全 局 


式 ， 接 受 这 些 上 下 文 信息 。 在 启动 时 ，JavaScript 从 宿主 环境 获取 的 对 象 树 





从 JavaScript 代码 的 角度 看 来 ， 全 局 对 象 在 程序 启动 前 就 已 经 存在 了 。 客 户 端 JavaScript 的 全 局 对 象 
被 称 作 window 对 象 。 


| 1.7 | JavaScript 相关 环境 





转 1.7.; 


大 约 从 2005 锯 


这 








的 理由 之 一 是 它 支 持 多 平台 AJAX 处 理 。 
虽然 这 一 时 期 AJAX 正在 逐步 普及 ,但 同时 AJAX 编程 也 存在 重大 问题 。Internet Explorer 和 Firefox 





这 两 个 当时 流行 的 浏览 器 的 API 并 不 录 
解决 这 一 问题 。 此 外 ， 它 还 提供 了 很 多 方便 的 API， 其 中 


Ruby 迭代 天 的 衍生 。 


在 此 之 后 ， 如 表 1.4 所 示 ， 出 现 了 大 量 的 JavaScript 库 。 


表 1.4 ”代表 性 的 客户 端 JavaScript 库 














FE 起 ， 才 正式 开始 使 用 开源 的 JavaScript 库 。 首 当 其 冲 的 是 prototype:js。 虽 然 之 前 也 丰 
一 些 JavaScript 库 ， 不 过 直到 从 prototype.js 开始 ， 使 用 库 才 成 为 了 一 种 常规 做 法 。prototype.js 受到 有 瞩 


ER 容 。 而 prototype.js 提供 的 API 则 是 弥合 了 T 




















些 可 以 


] 于 扩展 DOM 的 功能 ， 

















页 者 API 的 不 同 ， 以 
另 一 些 则 是 






































prototype.js http://www.prototypejs.org/ 
script.aculo.us http://script.aculo.us/ 

jQuery http://iquery.com/ 

Ext.js http://www.sencha.com/products/extjs/ 
Yahoo! Ul Library(YU)) http://developer.yahoo.com/yui/ 

Dojo http://dojotoolkit.org/ 

Mochikit http://mochi.github.com/mochikit/ 
MooTools http://code.google.com/closure/libray/ 
uupaa.js http://code.google.com/p/uupaa—js/ 
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源 代码 压缩 





为 了 使 客户 端 JavaScript 的 执行 更 加 高 速 ， 可 以 对 源 代码 进行 压缩 。 通 过 压缩 源 代码 可 以 实现 以 下 效 





果 以 提高 执行 速度 。 


@ 减少 了 网 络 通信 传送 量 而 使 得 网 络 等 待 时 间 减 少 。 


@ 源 代码 缩短 之 后 ，JavaScript 解释 器 ( 浏览 器 ) 用 于 解释 代码 的 时 间 减 少 。 


@ ( 有 些 压 缩 工 具 可 以 使 ) 源 代码 得 到 优化 。 
代表 性 的 源 代码 压缩 工具 如 表 1.5 所 示 。 
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I 表 1.5 源 代码 压缩 工具 














Google Closure Compiler http://code.google.com/closure/compiler/ 

YUI Compressor http://developer.yahoo.com/yui/compressor/ 
packer http://dean.edwards.name/packer/ 

JSMin http://www.crockford.com/javascript/jsmin.html 

















单纯 的 压缩 工具 的 效果 只 是 删除 不 需要 的 空白 内 容 、 换 行 符 以 及 注释 等 。 为 了 提高 运行 速度 而 不 写 
必要 的 注释 并 不 是 可 取 的 做 法 ， 所 以 ,这 样 单纯 的 压缩 工具 也 是 有 其 存在 意义 的 。 稍 高 级 一 些 的 压缩 工 
有 具 则 会 进行 将 变量 名 替换 为 较 短 的 字符 串 之 类 的 处 理 ， 不 过 这 样 一 来 ， 源 代码 的 可 读 性 也 会 大 大 降低 。 
更 高 级 一 些 的 压缩 工具 能 够 像 大 多 数 的 编译 器 那样 对 代码 进行 优化 。 例 如 ， 去 除 无 用 的 代码 ， 或 是 预先 
计算 代码 中 的 一 些 表 达 式 ， 并 将 其 替换 为 常量 ， 等 等 。 而 要 实现 这 一 效果 ， 就 不 能 把 源 代 码 仅 看 作 是 单 
纯 的 字符 串 ， 还 要 以 JavaScript 的 标准 正确 地 解释 其 含义 。 这 样 一 来 ， 也 就 实现 了 对 代码 的 检查 ， 能 够 发 
现代 码 中 一 些 潜在 的 错误 。 

星 然 对 源 代码 进行 压缩 非常 地 麻烦 ,但 相应 的 也 能 获得 不 小 的 收获 。 因 而 ， 在 开发 规模 较 大 的 情况 
下 ， 应 当 对 源 代码 进行 压缩 。 


国 1.7.3 集成 开发 环境 | 


JavaScript 已 经 有 了 不 少 的 集成 开发 环境 (IDE )， 不 过 其 中 的 一 些 还 尚未 完善 。 代 表 性 的 IDE 如 表 
1.6 所 示 。 
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表 1.6 JavaScript 的 IDE 















































































































































名 称 说 明 

Orion Eclipse 基金 会 提供 的 Web 的 JavaScript 专用 IDE 

Cloud9 云端 在 线 ( http://cloud9ide.com ) JavaScript IDE 

Eclipse Eclipse 基金 会 提供 的 IDE。 作 为 Java IDE 而 闻名 ， 同 时 也 支持 JavaScript 

NetBeans Oracle ( 原 Sun ) 开发 。 作 为 Java IDE 而 闻名 ， 同 时 也 支持 JavaScript 

Aptana Studio Appcelerator ( Titanium 的 开发 商 ) 所 收购 的 Aptana 公司 ( http://www.aptana.org ) 的 免费 产品 
WebStorm JetBrains 公司 的 收费 产品 ( http://www.jetbrains.com/webstorm/ ) 

Komodo IDE ActiveState 公司 的 收费 产品 
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JavaScript 的 语言 基础 


Re 讲解 JavaScript 的 核心 概念 。 其 中 ， 

~ 仅 会 介绍 JavaScript 的 语法 规则 ， 还 将 介 

绍 符合 JavaScript 风格 的 代码 书写 方式 ， 以 及 
人 的 编程 理念 。 
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JavaScript 基础 









在 详 述 JavaScript 的 语言 基础 之 前 ， 我 们 先 做 个 简单 介绍 。 本 章 的 目的 是 使 大 家 对 JavaScript 
语言 基础 有 整体 性 的 把 握 ， 而 严谨 详细 的 说 明 将 留 在 之 后 的 章节 中 详 述 。 


2.1 JavaScript 的 特点 


JavaScript 程序 设计 语言 有 如 下 几 个 特点 : 

@ 解释 型 语言 

@ 类 似 于 C 和 Java 的 语法 结构 

@ 动态 语言 

@ 基于 原型 的 面向 对 象 

@ 字面 量 的 表现 能 

@ 函数 式 编程 
国 解释 型 语言 

JavaScript 是 一 种 解释 型 语言 ， 和 解释 型 语言 相对 的 是 编译 型 语言 。 解 释 型 语言 直接 在 运行 环境 中 执 
行 代 码 ， 所 以 一 般 来 说 ， 与 编译 型 语言 相 比 ， 解 释 型 语言 的 开发 更 为 容易 。 特 别 是 JavaScript， 其 运行 环 
境 是 已 经 普及 的 浏览 器， 所 以 能 够 很 容易 地 尝试 开发 。 这 是 其 他 程序 设计 语言 所 不 能 比拟 的 。 

解释 型 语言 的 劣势 在 于 ， 其 运行 速度 通常 都 会 慢 于 编译 型 语言 ， 不 过 这 也 只 是 理论 上 的 情况 。 现 在 ， 
解释 型 语言 和 编译 型 语言 之 间 的 界线 正在 变 得 越 来 越 模糊 。 编 译 型 语言 在 有 了 足够 快速 的 编译 器 和 功能 
强大 的 开发 环境 之 后 ， 也 能 实现 和 解释 型 语言 相 匹 敌 的 开发 难 易 度 。 同 时 ， 解 释 型 语言 由 于 使 用 了 JIT 
( Just In Time ) 这 种 能 够 在 运行 中 进行 编译 的 技术 ， 使 得 运行 速度 得 以 改善 。 

如 今 ， 在 选择 程序 设计 语言 时 ， 比 起 选择 编译 型 语言 还 是 解释 型 语言 ， 更 重要 的 是 考虑 语言 的 设 
计 目 的 。 是 为 了 使 开发 过 程 变 得 轻松 还 是 为 了 提高 执行 效率 ， 话 言 最 初 的 设计 理念 不 同 ， 其 性 质 自 
然 会 有 差异 。 设 计 JavaScript 之 初 ， 优 先 考 虑 的 是 使 开发 过 程 变 得 轻松 ， 因 此 提供 了 多 种 特性 。 
图 类 似 于 C 和 Java 的 语法 结构 

JavaScript 的 语法 结构 与 C 和 Java 相似 。JavaScript 同样 有 证 或 while 这 类 关键 字 ， 其 语法 结 也 与 C 
和 Java 类 似 。 它 们 乍 一 看 很 像 ， 因 此 有 这 些 语言 开发 经 验 的 人 很 容易 就 能 熟悉 JavaScript。 不 过 需要 注 
意 的 是 ， 它 们 之 间 的 相似 性 其 实 并 不 如 表面 看 起 来 的 那么 强 。 
国 动态 语言 

JavaScript 与 C 和 Java 所 不 同 的 一 点 在 于 ，JavaScript 是 一 种 动态 语言 ， 将 在 之 后 详 述 。 单 从 代码 的 
角度 看 ， 动 态 语言 的 变量 和 函数 是 不 指定 返回 值 类 型 的 。JavaScript 之 所 以 被 设计 成 动态 语言 ， 和 选择 将 
其 设计 为 解释 型 语言 的 理由 一 样 ， 都 是 优先 考虑 了 开发 难 易 度 的 结果 。 对 解释 型 语言 以 及 动态 语言 的 特 
性 的 喜好 虽然 见仁见智 ， 但 语言 本 身 并 没有 高 下 优 劣 之 分 。 
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转 基于 原型 的 面向 对 象 

解释 型 动态 语言 并 不 少见 ， 现 有 的 较为 知名 的 脚本 语言 大 多 都 属于 这 一 类 型 。 不 过 基于 原型 的 面向 
对 象 特性 ， 使 得 JavaScript 与 它们 有 所 不 同 。 基 于 原型 的 面向 对 象 特性 和 基于 类 的 面向 对 象 特性 是 有 所 差 
别 的 ， 在 此 请 先 了 解 这 一 点 即 可 ， 更 为 详细 的 内 容 将 会 在 之 后 详 述 。 目 前 ， 被 称 为 面向 对 象 语言 的 程序 
设计 语言 ， 大 多 提供 了 基于 类 的 面向 对 象 语言 功能 。JavaScript 虽然 并 不 是 第 一 个 采用 基于 原型 的 面向 对 
象 特性 的 语言 ， 不 过 可 以 说 是 这 类 语言 中 最 为 著名 的 。 同 样 ， 基 于 原型 与 基于 类 的 面向 对 象 语言 之 间 的 
差异 ， 也 主要 是 个 人 喜好 的 区 别 ， 而 并 非 是 熟 优 熟 劣 的 问题 。 
转 字面 量 的 表现 能 力 

字面 量 的 表现 能 力 是 JavaScript 开发 生产 力 得 以 提高 的 一 个 重要 原因 。 在 Perl 之 后 ， 很 多 语言 都 提 
供 了 功能 强大 的 字面 量 功能 。 虽 然 其 中 表现 突出 的 不 止 JavaScript 一 种 ， 不 过 由 于 它 的 字面 量 功能 相对 来 
说 非常 优秀 ， 所 以 作为 语言 特点 之 一 列举 于 此 。 
转 泡 数 式 编程 

最 后 来 介绍 一 下 函数 式 编程 。 函 数 式 编程 是 一 种 历史 悠久 ， 而 又 在 最 近 颇 为 热门 的 话题 。 函 数 式 编 
程 在 面向 对 象 一 词 诞生 以 前 就 已 经 存在， 不 过 它 在 很 长 的 一 段 时 间 里 都 被 隐藏 于 过 程式 编程 (面向 对 象 
也 是 过 程式 编程 的 一 种 ) 的 概念 之 下 。 然 而 现在 这 种 状况 正在 逐步 发 生 改 变 ，JavaScript 正 是 这 一 改变 过 
程 中 的 一 部 分 。 尽 管 JavaScript 能 直接 支持 的 程序 设计 范式 在 本 质 上 还 是 过 程式 的 ， 但 由 于 具备 了 匿名 函 
数 ， 可 以 把 函数 作为 对 象 来 使 用 ， 所 以 同时 也 能 够 支持 函数 式 编程 。 


2 | 关于 编排 格式 


在 这 一 部 分 中 ， 我 们 将 按照 以 下 方式 表示 JavaScript 的 代码 范例 。 原 则 上 使 用 smjs ( SpiderMonkey 
的 Shell ) 来 确认 执行 结果 ， 并 使 用 以 ECMAScript 第 5 版 为 标准 的 JavaScript 1.8.5。 在 需要 明确 说 明 执 
行 结果 时 ， 在 JavaScript 代码 之 后 附 有 相应 的 执行 结果 。 
表达 式 求 值 的 结果 也 采用 和 执行 结果 相同 的 方式 编排 。 


























































































































// 用 于 说 明 语句 含义 的 注 炙 


Svar ooreary: 

运行 结果 ( 或 是 表达 式 求 值 的 结果 ) 

在 JavaScript 中 用 于 分 隔 语句 的 分 号 是 可 以 省 略 的 ， 不 过 在 本 书 的 范例 代码 中 ， 不 会 省 略 分 号 。 

如 果 在 运行 smjs 时 发 生 错误 ， 会 像 下 面 这 样 在 行 首 显示 “typein: 数字 ”。 这 里 的 数字 表示 正在 运行 
的 代码 行 号 。 由 于 运行 环境 不 同 ， 本 书 将 省 略 “typein: 数字 ”这 样 的 错误 行 号 。 


3 op 




















typein:1 ReferenceError: x is not defined 


国 print 函数 | 


JavaScript 的 核心 语言 中 并 不 包括 print 函数 ， 但 是 在 本 书 的 代码 范例 中 ， 将 会 使 用 到 print。 如 果 要 
在 浏览 器 中 运行 相关 代码 ， 请 改 用 alert 或 是 document.write ; 如 果 使 用 FireBug 或 是 Nodejs ( 请 参见 本 
书 第 6 部 分 )， 请 改 用 console.log 函数 。 

// 浏览 器 


War Dorin lere, 
或 者 


var print = document .write; 
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// 使 用 FireBug 或 是 Node.js 时 
Var print = console.1og; 


| 23 ,变量 的 基础 





故 2.3.1 变量 的 使 用 方法 | 


本 节 将 对 JavaScript 中 变量 的 使 用 方法 进行 说 明 。 变 量 的 作用 是 给 某 一 个 值 或 是 对 象 标注 名 称 。 在 介 
绍 了 对 象 和 函数 之 后 ， 会 再 对 变量 这 一 主题 进行 详细 说 明 。 本 节 中 先 不 考虑 那些 复杂 情况 ， 而 着 重 说 明 
变量 的 使 用 方法 。 

像 下 面 这 样 使 用 关键 字 var 就 可 以 对 变量 进行 声明 。 

js> var foo; // 声明 变量 foo 

在 之 后 还 会 进一步 详 述 变量 名 中 具体 可 以 使 用 哪些 字符 ， 现 阶段 请 先 将 其 理解 为 变量 名 可 以 使 用 任 
意 的 英文 字母 即 可 。 通 过 赋值 运算 符 〈= ) 可 以 给 变量 赋值 ， 即 在 运算 符 的 左 侧 书 写 变 量 ， 而 在 其 右 侧 书 
写 要 赋 的 值 。 




























































































// 将 字符 串 "abc'" 赋值 给 变量 foo 








变量 的 声明 和 赋值 也 可 以 像 下 面 这 样 同 时 进行 。 在 声明 变量 的 同时 为 其 赋值 是 一 种 较 好 的 编程 风格 。 
BS wens Meee SG // 声明 一 个 赋值 为 字符 串 "abc" 的 变量 foo 
JavaScript 中 的 变量 没有 变量 类 型 ( 之 后 会 说 明 变量 类 型 的 概念 )。 因 为 没有 变量 类 型 ， 所 以 对 于 同 
一 个 变量 ， 既 可 以 赋值 为 字符 串 ， 也 可 以 赋值 为 数字 ， 就 像 下 面 这 样 。 不 过 通常 情况 下 ， 以 这 种 方式 来 
使 用 变量 并 不 是 好 习惯 ， 所 以 请 尽 可 能 避免 出 现 这 样 的 代码 。 






































// 将 字符 串 "abc" 赋值 给 变量 foo 
// 将 数值 123 赋值 给 变量 foo 


在 表达 式 中 写 上 某 个 变量 名 之 后 就 能 获取 该 变量 的 值 。 


ES wes nm = 7 // 将 数值 7 赋值 给 变量 n 
J Tm WA 获取 变量 n 的 值 ， 并 加 上 1 











8 











严格 来 说 ,语句 中 的 变量 ， 对 于 左 值 和 右 值 是 有 所 不 同 的 。 左 值 指 的 是 赋值 表达 式 = 左 侧 的 变量 名 ， 
右 值 指 的 是 赋值 表达 式 = 右 侧 或 是 在 赋值 表达 式 外 的 其 他 表达 式 中 出 现 的 变量 名 。 右 值 中 的 变量 是 所 要 
用 于 赋值 的 值 ， 而 左 值 中 的 变量 则 是 将 被 赋值 的 对 象 。 用 这 些 专业 术语 来 说 明 可 能 不 太 容 易 理解 ， 其 实 
在 这 一 点 上 ，JavaScript 和 大 部 分 支持 赋值 功能 的 程序 设计 语言 是 完全 相同 的 。 对 于 左 值 和 右 值 ， 只 要 根 
据 直 觉 ， 将 其 理解 为 被 赋值 的 对 象 与 所 赋值 的 来 源 即 可 。 

被 声明 但 未 进行 任何 赋值 的 变量 ， 其 值 为 undefined ( 之 后 会 说 明 undefined 值 的 含义 )。 读 取 这 类 变 












































量 的 值 不 会 引起 运行 时 错误 。 需 要 注意 的 是 ， 在 大 部 分 情况 下 ， 读 取 undefined 值 都 是 产生 错误 的 根源 。 


Js> Var tecn 


eleoo // 变量 foo 的 值 为 undefined 
undefined 


如 果 要 读 取 没有 被 声明 的 变量 ( 即 作 为 右 值 使 用 该 变量 )， 就 会 引发 ReferenceError 异常 ; 如 果 将 其 
作为 左 值 使 用 ， 即 作为 赋值 对 象 使 用 ， 则 不 会 发 生 错 误 。 
更 为 详细 的 内 容 请 参见 2.3.2 节 。 
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Snel 
ReferenceError: x is not defined 


辆 2.3.2 省 略 var | 


熟悉 JavaScript 的 人 也 许 知 道 ， 在 JavaScript 中 var 关键 字 是 可 以 省 略 的 。 尽 管 此 前 提 到 ， 变 量 是 通 
过 var 来 声明 的 ， 但 其 实 不 通过 var 来 声明 也 可 以 对 变量 进行 赋值 。 这 样 的 变量 称 为 隐 式 声明 变量 。 采 用 
隐 式 声明 的 变量 都 是 全 局 变量 ， 即 使 是 在 函数 内 部 隐 式 声明 的 变量 也 属于 全 局 变量 。 

在 函数 外 部 通过 var 声明 的 变量 也 是 全 局 变量 ， 这 类 全 局 变量 是 显 式 声明 的 。 为 了 和 显 式 声明 的 全 
局 变量 相 区 别 ， 那 些 没 有 通过 var 声明 的 变量 被 称 为 隐 式 全 局 变量 。 

应 当 尽 可 能 避免 使 用 全 局 变量 ,特别 是 应 该 避免 使 用 隐 式 全 局 变量 。 开 发 者 只 需 做 恰当 的 处 理 ， 即 
在 声明 变量 时 总 是 使 用 var， 就 可 以 完全 避免 使 用 隐 式 全 局 变量 ， 从 而 解决 这 一 问题 。 

不 仅 是 本 书 ， 只 要 是 稍微 专业 一 些 的 JavaScript 书籍 ， 都 不 会 推荐 使 用 隐 式 全 局 变量 。 而 且 在 
ECMAScript 第 5 版 的 strict mode 中 ， 隐 式 全 局 变量 已 经 被 判定 为 一 种 错误 ( 请 参见 第 2 部 分 第 7 章 的 
“专栏 ”)， 所 以 请 不 要 省 略 var。 


转 2.3.3 常量 


ECMAScript 标准 没有 规定 常量 的 声明 语法 。 不 过 在 JavaScript 的 自 定义 增强 功能 中 ， 是 可 以 对 常量 
进行 声明 的 。 由 于 是 自 定义 的 增强 功能 ， 因 此 并 没有 明确 的 规范 。 下 面 介绍 的 是 SpiderMonkey 的 情况 。 

如 果 要 声明 一 个 常量 ,需要 使 用 const 关键 字 而 不 是 var。 可 以 作为 常量 名 使 用 的 字符 和 变量 的 是 相 
同 的 ， 不 过 习惯 上 常量 名 都 以 大 写字 母 表示 。const 的 使 用 方法 如 下 所 示 。 
























































































































































ED // 声明 常量 


JE rme(noo: 
多 


即使 给 常量 再 次 赋值 ， 这 个 常量 的 值 也 不 会 发 生 改变 。 其 实 ， 对 常量 再 次 赋值 应 该 算 作 一 种 错误 ， 
但 在 实际 中 这 并 不 会 导致 出 错 ， 对 此 请 多 加 注意 。 


十 ES CoOnst :FOO = ys 
js> FOO = 8; A 








js> print (FOO); 9 值 不 会 发 生 改 变 
沈 


如 果 在 声明 时 没有 对 常量 进行 赋值 的 话 ， 它 的 值 就 是 undefined， 对 其 的 处 理 方式 和 变量 相同 。 由 于 
const 属于 自 定义 增强 功能 ， 所 以 在 本 书 中 不 会 对 此 深究 。 


js> const FOO; 























IEE Vole) 
undefined 





| 2.4 | 函数 基础 





故 2.4.1 函数 的 定义 | 


JavaScript 中 的 函数 是 一 种 类 似 于 Java 中 方法 的 语言 功能 ， 不 过 它 可 以 独立 于 类 进行 定义 ， 所 以 从 
表面 上 来 看 ， 反 而 和 C 语言 或 是 PHP 的 函数 、Perl 的 子 程序 更 为 相似 。 不 过 ，JavaScript 中 的 函数 和 它 
们 在 本 质 上 是 不 同 的 。 它 们 之 间 的 差异 以 及 其 他 详细 的 内 容 ， 将 在 第 6 章 中 再 具体 说 明 。 
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本 节 仅 对 JavaScript 的 函数 进行 概要 性 的 说 明 。 在 基本 使 用 方式 上 ，JavaScript 中 的 函数 和 其 他 程序 
设计 语言 中 被 称 为 函数 或 子 程序 的 概念 并 没有 什么 不 同 。 函 数 是 由 一 连 串 的 子 程序 ( 语句 的 集合 ) 所 组 
成 的 ， 可 以 被 外 部 程序 调用 。 向 函数 传递 参数 之 后 ， 函 数 可 以 返回 一 定 的 值 。 

通常 情况 下 ，JavaScript 代码 是 自 上 而 下 执行 的 ， 不 过 函数 体内 部 的 代码 则 不 是 这 样 。 如 果 只 是 对 函数 
进行 了 声明 ， 其 中 的 代码 并 不 会 执行 。 只 有 在 调用 函数 时 才 会 执行 函数 体内 部 的 代码 (代码 清单 2.1 )。 


| 代码 清单 2.1 ”包含 函数 的 代码 的 执行 顺序 




















[je Wade 

runeteoner 和 // 声明 函数 
ET 下 

} 

[oade (CU eu 

(8 // 调用 函数 





// 代码 清单 2 .1 的 运行 结 





国 2.4.2 画 数 的 声明 与 调用 


可 以 通过 函数 声明 语句 来 定义 一 个 函数 。 函 数 声明 语句 以 关键 字 function 开始 ， 其 后 跟 有 函数 名 、 
参数 列表 和 函数 体 。 其 语法 如 下 所 示 : 

















// 函数 声明 语句 的 语法 

function 函数 名 ( 参数 ， 参 数 ，…… ) { 
函数 体 

} 











代码 清单 2.2 是 个 具体 例子 ， 其 中 函数 名 为 sum， 参数 名 为 wa 和 2。 函数 声明 中 所 写 的 参数 称 为 形 
参 (形式 参数 )。 代 人 码 清单 2.2 中 的 函数 sum 对 两 个 参数 做 了 加 法 运算 ， 并 通过 return 语句 返回 结 
| 代码 清单 2.2 ”函数 sum 的 声明 


Funceion scum (a 
return Number(a) + Number (bp); 
} 




















可 以 像 下 面 这 样 来 调用 函数 sum。 调 用 函数 时 ,传递 给 函数 的 参数 称 为 实 参 (实际 参数 )。 下 面 代码 
中 以 3 和 4 作为 实 参 调用 了 函数 sum。 
// 函数 sum 的 调用 





SE Su 
入 








函数 声明 时 不 必 指 定形 参 的 类 型 ”。 任 何 类 型 的 值 都 可 以 作为 实 参 传递 ， 因 而 开发 者 在 设计 函数 时 需 
要 考虑 接收 错误 类 型 的 值 的 情况 。 此 外 ， 形 参 的 数量 和 实 参 的 数量 可 以 不 一 致 ， 这 一 点 将 在 之 后 再 具体 
说 明 。JavaScript 的 这 些 特 性 ， 与 始终 严格 检查 参数 类 型 的 Java 形成 了 鲜明 的 对 比 。 因 此 ， 在 JavaScript 
中 自然 也 就 不 存在 函数 重 载 这 一 特性 〈( 即 可 以 存在 多 个 参数 不 同 的 同名 函数 )。 


大 2.4.3 匿名 函数 | 
还 可 以 通过 匿名 函数 表达 式 来 定义 一 个 函数 。 其 语法 形式 为 在 function 后 跟 可 以 省 略 的 函数 名 、 参 



























































OD 不 过 JavaScript 的 变量 本 身 就 没有 类 型 可 言 ， 所 以 形 参 没有 类 型 也 不 奇怪 。 
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数列 表 以 及 函数 体 。 其 语法 如 下 所 示 : 











// 匿名 函数 的 语法 

function ( 参数， 参数 ，…… ) { 

} 

function 函数 名 ( 参数 ， 参 数 ，…… ) { 
函数 体 

} 











可 以 看 到 ， 函 数 声明 语句 和 匿名 函数 表达 式 在 语法 上 几乎 一 模 一 样 ， 唯 一 的 区 别 仅 仅 是 能 否 省 略 函 
数 名 称 而 已 。 不 过 ， 因 为 匿名 函数 表达 式 是 一 种 表达 式 而 非 语句 ， 所 以 也 可 以 在 表达 式 内 使 用 。 另 外 由 
于 它 是 表达 式 因 此 也 会 有 返回 值 。 匿 名 函数 的 返回 值 是 一 个 Function 对 象 的 引用 (关于 引用 的 详细 内 容 
将 在 第 5 章 中 进行 说 明 )。 把 它 简单 理解 为 返回 一 个 函数 也 没有 问题 。 

不 过 请 不 要 因为 它们 都 是 表达 式 ， 而 将 匿名 也 数 表达 式 与 函数 调用 表达 式 相 混 淆 。 孔 数 调用 表达 式 
在 大 部 分 程序 设计 语言 中 都 是 存在 的 ， 而 匿名 函数 表达 式 在 一 些 程序 设计 语言 中 并 不 存在 ( 至 少 Java 
中 的 方法 是 无 法 实现 这 样 的 功能 的 )。 其 实 ， 通 过 表达 式 来 定义 一 个 函数 并 不 是 什么 新 的 功能 。 早 在 与 
JavaScript 有 些 类 似 的 Lisp 语言 的 时 代 ， 这 种 功能 就 已 经 存在 ， 并 且 在 一 些 比较 新 的 程序 设计 语言 中 ， 这 
一 功能 正在 变 得 越 来 越 常见 。 
匿名 函数 表达 式 的 使 用 方式 如 代码 清单 2.3 所 示 。 赋 值 表 达 式 右 侧 的 就 是 匿名 函数 表达 式 。 
上 代码 清 单 23 匿名 函数 表达 式 的 例子 


var sum Functlonl(a en 
return Number(a) + Number (b) 
} 


sum2 的 前 面 是 var， 所 以 它 是 一 个 变量 名 。 以 function 开始 的 匿名 函数 表达 式 将 返回 一 个 函数 。 也 








































































































就 是 说 ,代码 清单 2.3 的 含义 是 ， 将 Function 对 象 的 一 个 引用 赋值 给 变量 sum2。 可 以 像 下 面 这 样 来 调用 
变量 sum2 所 引用 的 函数 。 
// 调用 函数 sum2 





js> sum2(3, 4); 
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这 上段 代码 和 代码 清单 2.2 中 调用 函数 sum 的 方式 没有 区 别 。 也 就 是 说 ， 代 码 清单 2.2 中 的 函数 声明 语 
句 ， 和 代码 清单 2.3 中 赋值 表达 式 的 作用 是 相同 的 ， 都 会 将 匿名 函数 表达 式 赋值 给 变量 。 两 者 都 是 在 生 
成 一 个 没有 名 称 的 函数 体 (Function 对 象 ) 之 后 ， 再 赋予 其 一 个 名 称 。 目 前 只 要 认为 代码 清单 2.2 和 2.3 
中 的 语句 是 相同 的 就 可 以 了 。 第 6 章 会 对 两 者 的 细微 差异 进行 说 明 。 

还 可 以 像 下 面 这 样 ， 在 右 侧 书写 通过 函数 声明 语句 进行 定义 的 函数 ， 以 将 其 赋值 给 左 值 ， 这 样 就 可 
以 通过 被 赋值 对 象 的 名 称 来 调用 该 函数 。 将 其 理解 为 sum 这 一 名 称 持 有 该 函数 对 象 的 引用 即 可 。 至 此 ， 





















































读者 或 许 会 觉得 变量 名 和 函数 名 之 间 的 分 界 很 模糊 ， 而 事实 也 确实 如 此 ， 我 们 之 后 将 会 对 此 进行 详 述 。 
// 在 表达 式 右 侧 书写 代码 清单 2.2 中 的 函数 名 


nl 


// 调用 函数 sum3 





js> sum3(3, 4); 
eg 





国 2.4.4 西数 是 一 种 对 象 | 


JavaScript 中 的 函数 和 Java 中 的 方法 或 C 语言 中 的 函数 的 最 大 不 同 在 于 ，JavaScript 中 的 函数 也 是 一 
种 对 象 。 下 一 节 将 阐述 对 象 的 概念 ， 届 时 可 以 了 解 到 对 象 在 本 质 上 是 没有 名 称 的 。 而 对 于 函数 来 说 也 是 
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如 此 ， 因 为 函数 本 身 也 是 一 种 对 象 。 
正如 变量 存在 的 意义 是 为 了 调用 没有 名 称 的 对 象 ， 函 数 名 存在 的 意义 是 为 了 调用 没有 名 称 的 函数 。 
因此 ， 变 量 名 和 函数 名 实质 上 是 相同 的 。 这 一 点 在 之 后 会 再 次 说 明 。 虽 然 有 时 也 需要 区 别 对 待 变量 名 和 
函数 名 ， 不 过 这 里 为 方便 起 见 ， 暂 且 认 为 两 者 在 本 质 上 是 相同 的 。 
JavaScript 的 函数 是 一 种 对 象 ， 不 过 并 不 是 说 所 有 的 对 象 都 是 函数 。 函 数 是 一 种 包含 了 可 执行 代码 ， 
能 够 被 其 他 代码 调用 的 特殊 的 对 象 。 


| 25 ,对象 的 基础 







































































国 2.5.1 对 象 的 定义 | 


从 底层 实现 来 看 ，JavaScript 的 对 象 和 Java 的 对 象 在 基本 原则 上 是 相同 的 。 两 者 都 是 内 存 中 的 实体 ， 
保持 着 某 种 状态 ， 并 且 是 用 于 编程 操作 的 目标 对 象 。 但 是 ， 从 高 层 概 念 来 看 的 话 ， 就 会 发 现 两 者 有 着 不 
小 的 差别 。 

Java 中 的 对 象 可 以 认为 是 类 的 一 种 实例 化 结果 ， 而 JavaScript 中 并 没有 类 这 样 的 语言 构造 。 
JavaScript 中 的 对 象 是 一 个 名 称 与 值 配对 的 集合 。 这 种 名 称 与 值 的 配对 被 称 为 属性 。 这 样 一 来 ，JavaScript 
对 象 可 以 定义 为 属性 的 集合 。 

表面 上 看 ，JavaScript 对 象 和 Java 的 映射 (java.utiLMap ) 非常 相似 。 实 际 上 ，JavaScript 对 象 可 以 用 
作 管 理 键 值 对 的 关联 数组 [ 又 称 映射 (Map ) 或 字典 (Dictionary ) ]。JavaScript 对 象 还 有 着 Java 映射 所 
没有 的 两 个 特点 。 
其 一 是 JavaScript 对 象 的 属性 值 可 以 由 函数 指定 。 
其 二 是 JavaScript 具备 一 种 称 为 原型 链 的 构造 。 通 过 这 一 构造 ，JavaScript 对 象 实现 了 类 似 于 类 的 继 
承 的 能 力 。 具 体 的 内 容 将 在 第 $ 章 中 进行 详细 说 明 。 

以 上 的 说 法 可 能 有 些 复杂 ， 简 单 说 来 ， 将 对 象 理解 为 一 种 实体 即 可 ， 程 序 可 以 通过 它 来 进行 数据 处 理 "。 


国 2.5.2 对 象 字面 量 表达 式 与 对 象 的 使 用 | 


可 以 通过 对 象 字面 量 表达 式 来 生成 一 个 对 象 。 对 象 字面 量 表达 式 由 大 括号 {} 括 起 ， 内 部 有 属性 名 和 
属性 值 ， 如 下 所 示 。 


// 对 象 字面 量 表达 式 的 语法 
{ 属性 名 : 属性 值 ， 属 性 名 : 属性 值 ，…… } 


属性 名 可 以 是 标识 符 、 字 符 串 值 或 是 数值 。 属 性 值 则 可 以 是 任意 的 值 或 对 象 。 具 体例 子 如 代码 清单 
2.4 所 示 。 


| 代码 清单 2.4 ” 对象 字面 量 表达 式 的 例子 



























































































































































































































































人 // 属性 名 是 标识 符 
‘eo // 属性 名 是 字符 串 值 
全 // 属性 名 是 字符 串 值 
(le // 属性 名 是 3 

{ x:2，y:1，enable:true,，color:{ r:255,，g:255，b:255 } } // 各 种 类 型 的 属性 值 











在 ECMAScript 第 5 版 中 ， 还 允许 下 面 这 样 以 逗号 结尾 的 对 象 字 面 量 ， 而 这 在 ECMAScript 第 3 版 中 
是 被 禁止 的 。 由 于 会 在 版 本 较 老 的 Internet Explorer 中 发 生 问题 ， 所 以 应 当 尽 可 能 避免 在 对 象 字面 量 的 最 









































”更 进一步 的 说 明 请 参见 第 5 章 
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后 以 逗号 结尾 。 
(2 // ECMAScript 第 5 版 将 会 忽略 最 后 一 个 逗号 ， 所 以 不 会 产生 问题 








对 对 象 字 面 量 表达 式 求 值 所 得 到 的 结果 ， 是 所 生成 对 象 的 一 个 引用 。 

像 下 面 这 样 ， 在 赋值 表达 式 的 右 侧 书写 对 象 字面 量 的 话 ， 就 能 够 将 对 象 的 引用 赋值 给 变量 ( 将 会 在 
第 5 章 中 对 引用 进行 详细 说 明 )。 

// 对 象 字面 量 表达 式 与 赋值 表达 式 

js> var obj = { x:3, y:4 }; // 所 生成 对 象 的 引用 将 被 赋值 给 变量 obj 














js> typeof obj; // 通过 typeof 运算 符 来 判别 obj 的 类 型 ， 得 到 的 结果 是 object 
object 


为 方便 起 见 ， 我 们 称 变量 obj 所 引用 的 对 象 是 对 象 obj。5.2.3 节 还 将 对 此 详细 说 明 。 























故 2.5.3 属性 访问 l 
可 以 通过 点 运算 符 ( . ) 访问 对 象 引用 中 的 属性 。 只 要 在 点 运算 符 之 后 书写 属性 名 ， 就 能 够 读 取 相应 



































的 属性 值 。 
VY MES Toren) // 显示 对 象 obj 的 属性 x 的 值 
本 











如 果 属 性 的 值 是 一 个 对 象 ， 可 以 像 下 面 这 样 通过 多 次 点 运算 来 读 取 其 属性 。 
SE var ob os 


Ee onus lo on ed oop 
2 


在 赋值 表达 式 的 左 侧 书 写 属 性 访问 表达 式 的 话 ， 就 可 以 将 相应 的 值 赋 给 该 属性 。 
EE el oe // 这 将 覆盖 已 有 的 属性 值 


I olsun eso 
这 区 


如 果 赋 值 给 尚 不 存在 的 属性 名 ， 则 将 新 建 该 属性 并 对 其 赋值 。 
IE Clo 2 = Bh // 新 建 属性 





























JIS rine (ob 
a 





国 2.5.4 属性 访问 (括号 方式 ) | 
除了 点 运算 符 外 ， 还 可 以 使 用 中 括号 运算 符 [] 来 访问 属性 。[] 内 是 需要 访问 的 属性 名 的 字符 串 值 。 


ls oreo 7 opje x 人 a 
3 








中 里 可 以 是 字符 字面 量 ， 也 可 以 是 值 为 字符 串 的 变量 。 


:> aa 而 e ET 





js> print (obj [name] ) ; // 与 obj .x 相同 
33 


括号 运算 符 也 能 用 于 赋值 表达 式 的 左 侧 。 
Es lB) = Bp // 将 数值 5 赋值 给 该 属性 ( 若 该 属性 不 存在 则 新 建 属性 ) 











第 5 童 将 对 分 别 在 哪些 场合 下 使 用 点 运算 符 以 及 括号 运算 符 进行 说 明 。 
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转 2.5.5 方法 | 


可 以 把 任意 类 型 的 值 、 对 象 或 者 函数 赋值 给 对 象 的 属性 。 正 如 前 节 所 讲 ， 对 匿名 函数 表达 式 求 值 所 
得 到 的 结果 是 函数 对 象 的 引用 ， 所 以 ， 也 可 以 像 下 面 这 样 来 书写 。 


Is obj = functionm 











(a, b) {return Number(a) + Number (b); }; 
// 将 函数 赋值 给 对 象 obj 的 属性 fn 


可 以 像 下 面 这 样 ， 对 被 赋值 给 属性 的 函数 进行 调用 。 


Ts oo En // 调用 函数 




















回顾 一 下 之 前 章节 的 说 明 可 以 发 现 ， 在 代码 清单 2.2 之 后 还 可 以 像 下 面 这 样 书写 。 


js> obj.fn2 = sum; // sum 是 在 代码 清单 2.2 中 定义 的 函数 


js> obj.fn(3, 4); // 调用 函数 
A 











从 该 调用 表达 式 可 以 看 出 ， 通 过 点 运算 符 来 调用 函数 ， 和 其 他 语言 中 的 方法 调用 十 分 相似 。 事 实 上 ， 
不 仅 在 表面 上 很 像 ， 其 内 部 原理 也 和 方法 调用 如 出 一 略 。 在 JavaScript 中 并 没有 方法 这 种 语言 特性 ， 不 过 
实际 上 作为 对 象 属性 的 函数 也 可 称 为 一 种 方法 “。 


国 2.5.6 new 表达 式 | 


JavaScript 中 new 表达 式 的 作用 是 生成 一 个 对 象 。 可 以 像 下 面 这 样 使 用 该 表达 式 。 
// new 表达 式 的 例子 


js> var obj = new Object () ; 

















js> typeof obj; // 通过 typeof 运算 符 来 判别 obj 的 类 型 ， 得 到 的 结果 是 object 
object 


和 之 前 说 明 的 通过 对 象 字面 量 表达 式 生成 的 对 象 一 样 ， 通 过 new 表达 式 生成 的 对 象 ， 其 属性 能 够 被 














读 取 。 

以 直观 的 方式 来 理解 的 话 ， 关 键 词 new 之 后 所 写 的 是 类 名 。 不 过 正如 已 此 前 说 明 ，JavaScript 中 没 
有 类 的 概念 ， 所 以 ， 根 据 JavaScript 的 语法 规则 ，new 之 后 所 写 的 是 函数 名 。 在 new 之 后 写 函 数 名 的 话 ， 
就 会 把 该 函数 作为 构造 函数 来 进行 调用 。 


国 257 类 与 实例 | 


再 次 强调 一 下 ， 在 JavaScript 的 语言 特性 中 没有 “类 ”的 概念 。 但 是 在 本 书 中 为 了 便于 理解 ， 将 用 类 
这 个 词 来 称呼 那些 可 以 被 视 作 “类 ”的 概念 。 也 就 是 说 ， 在 本 书 中 将 用 “类 ”， 来 称呼 那些 实际 上 将 会 调 
用 构造 函数 的 Function 对 象 。 此 外 ， 在 强调 对 象 是 通过 调用 构造 函数 而 生成 的 时 候 ， 会 将 这 些 被 生成 的 
对 象 称 作对 象 实例 以 示 区 别 。 

综 上 所 述 ， 虽 然 在 JavaScript 中 没有 类 的 概念 ， 但 将 new 之 后 所 写 的 标识 符 ( 函数 名 ) 看 作 是 类 名 ， 
也 并 没有 什么 概念 上 的 问题 。 也 就 是 说 ， 完 全 可 以 认为 ， 上 文中 代码 new ObjectO 的 作用 是 生成 一 个 
Object 类 的 实例 。 


国 2.5.8 对 类 的 功能 的 整理 | 
在 这 一 部 分 中 ， 将 集中 对 一 些 标 准 内 置 类 (Object 类 或 是 String 类 ) 的 功能 进行 说 明 。 现 在 将 类 的 










































































@ 在 第 5 章 中 将 会 对 方法 进行 详细 说 明 。 
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功能 整理 在 表 2.1 中 。 
表 2.1 对 类 的 功能 的 整理 



































接口 说 明 

函数 或 是 构造 函数 的 调 一 

类 的 属性 相当 于 Java 中 的 static 方法 或 是 static 域 
prototype 对 象 的 属性 相当 于 Java 中 的 实例 方法 

实例 属性 相当 于 Java 中 的 实例 域 

















可 能 大 家 阅读 了 第 $ 章 之 后 ， 才 能 彻底 理解 表 2.1 的 含义 。 在 这 里 ， 先 对 此 做 一 些 简单 的 说 明 。 

类 的 属性 是 一 个 类 自身 的 属性 ， 例 如 ，String 类 的 属性 是 String 类 的 对 象 自身 的 属性 。 如 果 是 函数 
的 话 ， 则 可 以 像 String.fromCharCode(0x41) 这 样 来 使 用 。 如 果 用 更 加 直观 一 些 的 说 法 来 讲 ， 这 就 相当 于 
Java 或 C++ 中 的 static 方法 。 

prototype 对 象 的 属性 和 实例 属性 ， 都 是 以 对 象 实例 的 形式 来 进行 访问 的 。 以 String 类 为 例 ， 可 以 以 
strtrimg 或 是 strlength 的 方式 ， 来 使 用 引用 了 String 对 象 ( 对 象 实例 ) 的 变量 str。 

prototype 对 象 的 属性 与 实例 属性 之 间 的 不 同 点 在 于 是 否 进行 了 继承 。 例 如 ，String 对 象 的 trim 方法 ， 
其 实 是 String.prototype 对 象 的 属性 。 这 种 以 实例 来 继承 属性 的 方式 被 称 为 原型 继承 。 


国 2.5.9 对 象 与 类 型 lL 


Java 中 对 象 分 为 类 与 接口 等 不 同类 型 。 在 JavaScript 中 不 存在 这 样 的 类 型 区 分 。 不 过 如 果 把 对 象 的 行 
为 方式 定义 为 其 类 型 的 话 ，JavaScript 的 对 象 也 可 说 是 有 类 型 的 ， 只 不 过 并 不 是 Java 那样 的 严格 的 类 型 。 

在 Java 中 ， 需 要 事先 进行 严格 的 类 型 定义 (通常 以 层级 方式 进行 管理 )， 然 后 将 对 象 置 于 类 型 层级 
中 进行 分 类 。 然 而 在 JavaScript 中 ， 则 是 根据 不 同 对 象 的 不 同行 为 方式 ， 在 事实 上 对 其 类 型 做 出 了 分 类 。 
在 Java 中 ， 由 于 语法 规则 的 需要 ， 强 制 使 用 了 基于 类 型 层级 的 编程 风格 。 与 此 相对 ， 在 JavaScript 中 虽 
然 也 能 够 定义 ( 类似 于 ) 类 ( 的 实体 )， 并 以 类 型 层级 的 方式 对 对 象 进行 分 类 ， 但 这 仅仅 是 可 供 选 择 的 一 
种 风格 ， 没 有 作 强 制 性 的 要 求 。 


2.6 | 数组 的 基础 


数组 是 一 种 用 于 表达 有 顺序 关系 的 值 的 集合 的 语言 结构 。 在 JavaScript 中 ， 数 组 并 非 是 一 种 内 建 类 
型 。 相 对 地 ，JavaScript 支持 Array 类 ， 所 以 数组 能 够 以 Array 类 的 实例 的 形式 实现 。 不 过 ， 由 于 有 数组 
字面 量 的 表达 方式 ， 所 以 在 一 般 情 况 下 ， 只 需 将 其 作为 内 建 类 型 使 用 即 可 。 






































































































































数组 字面 量 的 书写 方式 为 ， 在 方 括号 内 列 出 所 需 的 值 。 通 过 数组 字面 量 就 能 够 生成 数组 。 
// 数组 字面 量 的 例子 








JE wene Eles = Ils 


数组 内 的 各 个 值 被 称 作 元 素 。 每 一 个 元 素 都 可 以 通过 索引 (下 标 ) 来 快速 读 取 。 索 引 是 从 零 开 始 的 
整数 。 对 于 上 面 的 数组 ， 可 以 像 下 面 的 代码 这 样 ， 通 过 在 方 括号 中 书写 索引 值 1 来 读 取 其 第 2 个 元 素 。 

// 接 之 前 的 代码 

DE oe // 读 取 索引 值 为 1 的 元 素 

100 

ls > a 200% // 为 索引 值 为 1 的 元 素 赋 值 

Somel(ar ll 

200 


在 括号 中 不 仅 可 以 直接 写 某 个 数值 ， 还 可 以 写 具 有 某 一 特定 值 的 变量 或 表达 式 。 



































// 接 之 前 的 代码 
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ta he 4 Wl 


print (arr [n] ); // 与 a[1] 含义 相同 


Pre ee Len // 与 a[2] 含义 相同 





JavaScript 的 数组 支持 同时 包含 不 同类 型 的 元 素 。 以 下 是 一 个 同时 包含 数值 和 字符 串 的 例子 。 同 样 ， 
对 象 以 及 数列 也 能 够 作为 数组 元 素 。 
// 包含 不 同类 型 元 素 的 数组 的 例子 





ES en chee te eo ly 





专栏 


代码 书写 风格 
无 论 是 哪 种 程序 设计 语言 , 都 有 其 代码 书写 风格 。 虽 然 不 遵循 代码 书写 风格 也 能 写 出 可 以 运行 的 代码 ， 
是 这 会 为 之 后 阅读 代码 时 增加 不 必要 的 麻烦 。 因 此 遵循 代码 书写 风格 是 非常 重要 的 。 
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站 竺 


JavaScript 由 于 其 特殊 的 历史 与 定位 ， 有 着 略 显 独特 的 代码 书写 风格 。 造 成 这 一 局 面 的 背景 之 一 ， 和 客户 
端 JavaScript 的 历史 有 关 。 对 于 客户 端 代码 来 说 ， 代 码 体积 的 大 小 不 但 会 影响 运行 速度 ， 还 会 直接 影响 网 络 
传输 的 性 能 。 在 Web 的 发 展 历史 中 ， 尤其 是 早期 ， 如 何 减少 网 络 数据 传输 量 是 一 个 重要 的 课题 ( 至 今 仍然 非 
常 重 要 )。 因 此 ，JavaScript 中 有 着 大 量 以 减少 代码 书写 量 为 目的 的 代码 书写 风格 。 乍 一 看 ， 简 洁 书 写 似 乎 是 

件 好 事 ， 但 事实 上 ， 也 存在 着 一 些 看 似 取 巧 实则 糟糕 的 做 法 。 说 到 底 ， 代 码 书 写 风 格 是 历史 的 产物 ， 不 能 
仅仅 根据 是 否 正 确 来 判断 代码 书写 风格 的 好 坏 ， 而 应 该 去 尝试 接受 这 些 既定 事实 。 

另 一 背景 则 和 JavaScript 普及 的 历史 有 关 。 其 他 很 多 程序 设计 语言 在 被 广泛 普及 之 前 ， 往 往 都 会 有 少数 
优秀 的 开发 者 首先 使 用 。 通 常 在 这 一 时 期 ， 该 语言 的 代码 书写 风格 会 初步 成 形 ， 然 后 在 随后 更 为 广泛 的 普及 
过 程 中 发 生 一 些 变化 。 而 JavaScript 的 情况 并 非 如 此 。 在 其 普及 初期 ， 对 JavaScript 感 兴趣 的 主要 是 那些 书 
写 HTML 的 网 页 设计 师 ， 或 者 一 些 主 用 其 他 语言 的 开发 者 ， 他 们 仅仅 把 JavaScript 作为 一 种 临时 的 替代 品 来 
使 用 。 因 此 ，JavaScript 没有 属于 自己 的 核心 代码 书写 风格 ， 却 有 着 很 多 模仿 其 他 语言 而 来 的 代码 书写 风格 。 
比如 ， 类 似 于 Java 代码 风格 的 JavaScript 代码 ， 又 或 是 类 似 于 PHP 代码 风格 的 JavaScript 代码 ， 诸 如 此 类 。 
“过 最 近 几 年 ， 具 有 JavaScript 自身 特点 的 代码 书写 风格 正在 逐渐 普及 。 
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JavaScript 的 数据 类 型 






在 JavaScript 中 ,除了 Object 类 型 ,还 有 5 种 基本 数据 类 型 。 由 于 JavaScript 是 一 种 动态 语言 ， 
因此 在 使 用 时 很 少 会 意识 到 其 数据 类 型 的 存在 。 但 是 为 了 深入 理解 JavaScript 语言 ， 我 们 仍然 
有 必要 清楚 地 理解 各 种 数据 类 型 。 


”3.1 | 数据 类 型 的 定义 


数据 类 型 决定 了 一 个 数据 的 特征 ， 即 限定 了 该 数据 必须 按照 一 定 的 规则 进行 操作 。 在 程序 设计 中 也 
是 如 此 ， 特 定数 据 类 型 的 数据 会 有 其 相应 的 行为 模式 。 

JavaScript 中 有 以 下 5 种 基本 数据 类 型 。 

@ 字符 串 型 

@ 数值 型 

@ 布尔 型 

@ null 型 

@ undefined 型 


在 这 5 种 基本 数据 类 型 之 外 的 都 被 称 为 Object 类 型 。 也 就 是 说 ， 总 的 来 看 ，JavaScript 中 的 数据 类 型 
可 以 分 为 6 种 。 

在 这 里 ， 先 来 解释 我 们 已 经 接触 过 的 两 个 术语 ， 即 说 明 值 和 对 象 在 使 用 上 的 区 别 。 在 本 书 中 ， 基 本 
数据 类 型 的 实例 被 称 为 “ 值 "，Object 类 型 的 实例 被 称 为 “对 象 *。 其 他 面向 对 象 语言 也 是 这 样 区 分 的 ， 
所 以 不 会 造成 误解 。 

不 过 ，JavaScript 支持 值 与 对 象 的 隐 式 变换 ， 所 以 有 时 可 认为 两 者 是 完全 相同 的 ， 而 这 会 导致 理解 混 
乱 。 同 时 ，JavaScript 的 变量 没有 类 型 之 分 ， 所 以 值 和 对 象 之 间 的 区 别 就 变 得 更 为 模糊 了 。 


国 3.1.1 在 数据 类 型 方面 与 Java 作 比 较 | 


JavaScript 和 Java 在 数据 类 型 方面 的 差异 ， 不 仅仅 是 两 者 所 采用 的 术语 不 同 。 接 下 来 ， 我 们 从 两 个 
不 同 角 度 来 讨论 这 些 差别 : 其 一 是 从 动态 数据 类 型 和 静态 数据 类 型 的 角度 ， 其 二 是 从 基于 类 和 基于 原型 
的 角度 。 
转 动态 数据 类 型 与 静态 数据 类 型 

在 JavaScript 中 ， 值 和 对 象 具有 数据 类 型 ， 而 变量 没有 数据 类 型 。 事 实 上 ，JavaScript 中 并 不 存在 变 
量 类 型 的 概念 。 与 之 相反 ， 在 Java 语言 中 变量 有 类 型 之 分 。Java 中 的 变量 有 其 数据 类 型 ， 它 限制 了 可 以 
对 该 变量 赋值 的 值 或 对 象 引用 的 类 型 。 因 为 JavaScript 的 变量 不 具有 数据 类 型 ， 所 以 可 以 对 其 赋 任 意 类 型 
的 值 ， 也 可 以 使 其 引用 任意 类 型 的 对 象 。 

像 Java 这 样 ， 变 量具 有 数据 类 型 的 语言 ， 被 称 为 静态 数据 类 型 语言 ;而 像 JavaScript 这 样 ， 变 量 没 
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有 类 型 的 语言 ， 则 被 称 为 动态 数据 类 型 语言 "。 
转 基于 类 与 基于 原型 

对 于 Java 来 说 ， 内 建 类 型 (int 或 double 之 类 ) 之 外 的 都 是 用 户 自 定 义 类 型 。 用 户 自 定 义 类 型 又 可 
以 分 为 类 和 接口 两 种 类 型 。Java 的 用 户 自 定义 类 型 的 使 用 方法 ， 从 其 名 称 中 就 可 略 知 一 二 ， 即 开发 者 需 
要 书写 该 类 型 的 定义 语句 来 定义 该 类 型 。 而 对 象 则 作为 这 些 由 用 户 定 义 的 数据 类 型 的 实例 ( 实体 ) 存在 。 
这 就 是 Java 的 基本 特性 。 这 种 编程 风格 被 称 为 基于 类 的 语言 风格 。 

另 一 方面 ， 在 JavaScript 的 语言 规范 中 ， 不 存在 定义 数据 类 型 的 语句 。 不 需要 使 用 特别 的 语句 就 能 
定义 一 个 对 象 的 属性 或 方法 ， 而 这 样 也 就 决定 了 该 对 象 的 类 型 。 所 谓 类 型 也 就 是 行为 方式 上 的 共性 。 由 
于 每 个 对 象 都 具有 共同 的 行为 方式 ， 所 以 可 以 使 用 原型 对 象 。 这 样 的 编程 风格 被 称 为 基于 原型 的 风格 。 


国 3.1.2 基本 数据 类 型 和 引用 类 型 | 


虽然 JavaScript 的 变量 不 具有 数据 类 型 ， 但 从 概念 上 ，JavaScript 变量 可 以 分 为 基本 数据 类 型 变量 和 
引用 类 型 变量 。 基 本 数据 类 型 变量 直接 保存 有 数值 等 类 型 的 数据 的 值 ， 而 引用 类 型 变量 则 保存 有 对 象 的 
引用 。 尽 管 表面 上 两 者 没有 区 别 ， 但 其 内 在 是 不 同 的 。 因 此 为 了 正确 地 理解 其 内 部 实现 原理 ， 就 需要 引 
人 引用 这 一 概念 。 

这 一 部 分 内 容 将 在 第 5 章 进 一 步 详细 说 明 。 


3.2 | 内 建 数据 类 型 概要 


在 ECMAScript 标准 中 ， 内 建 数据 类 型 (built-in type ) 分 为 5 种 基本 数据 类 型 以 及 Object 类 型 。 该 
标准 中 并 没有 原始 类 型 ( primitive type， 也 称 为 基本 数据 类 型 或 是 简单 数据 类 型 ) 这 样 的 术语 ， 而 是 使 
用 了 原始 值 (primitive value ) 的 名 称 。 在 本 书 中 ， 为 了 便于 理解 ， 统 一 使 用 基本 数据 类 型 这 一 名 称 。 


加 | JavaScript 的 基本 数据 类 型 | 


这 里 通过 与 Java 的 对 比 来 解说 JavaScript 的 基本 数据 类 型 。 

JavaScript 的 字符 串 型 是 基本 数据 类 型 ， 而 Java 的 字符 串 型 并 不 是 基本 数据 类 型 ， 这 是 两 者 的 区 别 
之 一 。 不 过 ， 其 实 两 者 在 本 质 上 并 没有 太 大 的 不 同 。 因 为 在 Java 中 ， 字 符 串 型 和 字面 量 以 及 运算 符 一 
样 ， 属 于 被 特别 对 待 的 Object 类 型 。 字 符 串 连接 运算 符 (+ 号 ) 在 Java 和 JavaScript 中 的 作用 也 是 相同 
的 。 之 后 还 将 说 明 ， 在 JavaScript 中 ， 字 符 串 值 会 被 隐 式 地 转换 为 字符 串 对 象 类 型 。 熟 悉 Java 的 人 很 容 
易 就 能 掌握 JavaScript 中 字符 串 型 的 用 法 。 不 过 在 JavaScript 中 不 存在 字符 类 型 。 如 果 需 要 表达 某 个 字符 
的 话 ， 请 使 用 长 度 为 1 的 字符 串 值 。 

JavaScript 只 有 一 种 数值 类 的 数据 类 型 ， 其 内 部 构造 为 64 位 的 浮 点 小 数 ， 这 相当 于 Java 中 的 double 
类 型 。 和 JavaScript 的 情况 不 同 ， 在 Java 中 有 5 种 整数 类 型 和 2 种 浮 点 数 类 型 。JavaScript 之 所 以 只 支持 
一 种 数值 类 型 ， 是 由 于 设计 当初 更 多 地 着 眼 于 降低 编程 难度 ， 而 非 提 升 运 行 效率 。 如 果 有 多 种 数值 类 型 ， 
就 不 得 不 在 考虑 在 进行 赋值 时 考虑 是 否 会 产生 错误 。 而 JavaScript 数值 只 有 一 种 数值 数据 类 型 ， 除 了 部 
分 特殊 情况 ， 通 常 不 会 发 生 类 型 转换 错误 。 从 男 一 方面 来 说 ， 由 于 数值 类 型 能 够 与 其 他 类 型 进行 隐 式 转 
换 ， 所 以 仍然 存在 大 量 陷阱 ”。 
















































































































































































































































































































































































中 同 理 ， 对 于 Java 和 JavaScript 中 元 数 的 参数 和 返回 值 ， 也 存在 类 似 的 差别 。JavaScript 的 函数 参数 及 返回 值 是 不 具有 数据 类 
型 的 。 也 就 是 说 ， 静 态 数据 类 型 和 动态 数据 类 型 之 间 的 差异 在 函数 的 类 型 中 也 会 有 所 体现 。 
@， 类 型 变换 的 问题 将 在 之 后 详 述 。 
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布尔 型 在 Java 和 JavaScript 中 是 没有 区 别 的 ， 同 样 都 是 使 用 true 和 false 的 字面 量 。 

null 类 型 的 值 只 有 null 一 种 情况 ， 并 且 null 属于 字面 量 。 虽 然 Java 中 也 存在 null 这 一 字面 量 , 但 是 
没有 null 类型，null 只 是 一 种 可 以 被 引用 的 值 而 已 。 尽 管 有 这 样 的 差别 ， 但 是 Java 中 的 null 和 JavaScript 
中 的 null 在 用 法 上 几乎 没有 区 别 ， 只 需要 注意 一 下 类 型 转换 的 问题 即 可 。 

undefined 类 型 是 指 未 定义 的 值 的 类 型 ， 这 一 概念 在 Java 中 是 不 存在 的 。 如 果 在 Java 中 使 用 类 似 于 
undefined 类 型 的 值 的 话 ， 就 会 发 生 编 译 错误 。 


| 3.3 | 字符 串 开 


故 3.3.1 字符 串 字面 量 | 


字符 串 值 可 以 通过 字符 串 字 面 量 来 表示 。 字 符 串 字面 量 需 要 用 双 引 号 (" ) 或 单 引号 (') 括 起 来 。 请 
看 下 面 的 例子 。 


js> var s = "abc"; // 将 字符 串 值 赋 值 给 变量 s 
IE Ne (0 // 显示 变量 s 的 值 
Eee 



























































Svar epee WA 将 字符 串 值 赋值 给 变量 s 
scr ms // 显示 变量 s 的 值 
Elele 


特殊 字符 可 以 通过 转 义 字符 〈 串 ) 来 表示 。 可 以 通过 在 转 义 符 之 后 使 用 特定 字符 ， 来 表达 一 些 特殊 









































的 含义 。 转 义 符 是 反 斜 杜 (\ )。 例 如 ，\n 是 换行 符 的 表达 方式 。 
表 3.1 总 结 了 一 些 常用 的 转 义 字符 〈 串 )。 


表 3.1 转 义 字符 ( 串 ) 

































































转 义 字符 ( 串 ) 含义 

Nm 换行 (LF ) 

NN tab ( 水 平 制 表 符 ) 

\b 退 格 

Nr 换行 ( CR ) 

Vf 换 页 

Vv 垂直 制 表 符 

\ 反 斜 杠 

vd 单 引号 

双 引 号 

\XXX 以 十 六 进 制 代码 XX 表示 的 一 个 字符 ( X 是 0 到 9 的 数字 或 a 到 ff 的 字母 )。 例如 ，\x41 表示 “A” 
\UXXXX 以 十 六 进 制 代码 XXXX 表示 的 一 个 Unicode 字符 (X 是 0 到 9 的 数字 或 a 到 f 的 字母 )。 例如 ,\u03a3 表示 希腊 字符 > 


























因为 可 以 用 两 种 引号 来 包围 字符 串 字 面 量 ， 所 以 只 要 对 此 加 以 活用 ， 就 能 够 少 用 转 义 字符 。 例 如 ， 








在 包含 大 量 双 引 号 的 字符 串 字 面 量 外 使 用 单 引 号 ， 就 能 够 减少 转 义 字符 的 出 现 。 
js> var s = 'I say "yes"';// 对 于 双 引 号 不 需要 使 用 转 义 字符 ( 当然 使 用 转 义 字符 也 没 问 题 ) 








Son sy 
有 gy 


在 一 些 脚本 语言 中 ， 可 以 通过 双 引 号 和 单 引号 来 改变 转 义 字符 的 作用 。 不 过 在 JavaScript 中 ， 双 引号 
和 单 引号 除了 有 其 各 自 的 转 义 字符 之 外 ， 在 功能 上 并 没有 其 他 差异 。 
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故 3.3.2 字符 串 型 的 运算 


在 前 一 节 中 可 以 看 到 ,在 = 运算 符 右 侧 书 写字 符 串 值 ， 就 角 








人 bb 


恋 量 


bE 够 将 其 赋值 给 位 于 等 号 左 侧 的 变量 ; 如 


恋 量 


果 在 右 侧 书写 的 是 值 为 字符 串 值 的 变量 ， 也 一 术 
大 容易 理解 ， 通 过 下 面 的 例子 就 能 一 目 了 然 了 。 
// 将 字符 串 值 'abc' 赋值 给 变量 s 


// 将 变量 s 的 值 赋值 给 s2 
// 变量 s2 的 值 为 字符 串 值 'abc' 


将 其 值 赋值 给 等 号 左 侧 的 仅 靠 语言 描述 可 能 不 





上 用 





之 里 。 


Var s 
Var S22 


Brint (ta) 


rabpe's 

















Ud 


熟悉 “引用 ”或 是 “指针 ”的 人 看 了 上 面 的 例子 ， 也 许 会 考虑 下 面 的 问题 ， 当 改变 变量 s 的 字符 
值 时 ， 变 量 s2 的 值 会 随 之 改变 吗 ? 














这 里 先 简单 回答 一 下 ， 之 后 再 作 详 述 。 答 案 是 ， 由 于 JavaScript 的 字符 串 型 是 不 可 变 类 型 ， 所 以 字符 
串 值 本 质 上 是 不 能 改变 的 。 这 个 答案 看 似 没 说 什么 ， 不 过 JavaScript 确实 和 Java 一 样 ， 其 字符 串 型 是 不 





变 类 型 ， 


回 到 字符 下 
js> 

js> 

js> 

js> print(s 
012345 


二 = 运算 符 可 以 在 连接 字符 上 


了 JS Var & 到 条 直 有 
JIBS Ss T= 
js> print (es 
012345 


因为 字符 串 值 是 不 可 变 的 ， 所 以 上 面 运 算 生 成 的 是 不 同 于 '012' 和 '345' 的 新 的 字符 串 值 '012345'。 在 
下 面 的 例子 中 ， 变 量 s2 的 字符 串 值 仍然 是 '012'。 


OT 


可 所 以 这 样 的 回答 对 于 Java 程序 员 来 说 ， 应 该 是 不 难 理解 的 。 


运算 符 的 话题 。 可 以 通过 + 运算 符 来 连接 字符 串 值 。 具 体 的 例子 如 下 所 示 。 




















的 同时 进行 赋值 。 





// 变量 s 的 值 为 字符 串 值 '012345， 








var s 
var ‘S22 
> 


Print (S22) 


s 的 值 为 字符 串 值 '012345' 
s2 的 值 仍 保持 为 字符 串 值 '012， 





可 以 通过 typeof 运算 符 来 获知 值 的 数据 类 型 。 对 字符 串 型 进行 typeof 运算 的 话 ， 将 会 得 到 字符 串 值 
"string" 这 一 结果 。 下 面 是 一 个 具体 的 例子 。 


js> typeof 'abc'; // 对 字符 串 字 面 量 进行 typeof 运算 
string 




















js> vas s Pane 
js> typeof s; // 对 变量 s 的 值 进行 typeof 运算 
// 也 可 以 添加 括号 


// typeof 运算 的 结果 也 是 字符 串 值 


string 

js> typeof (s); 

string 

js> typeof (typeof (s)); 
string 





国 3.3.3 字符 串 型 的 比较 | 
JavaScript 有 两 种 等 值 运算 符 ， 即 === 和 ==。 与 之 对 应 ， 也 有 两 种 不 等 运算 符 !== 和 !=。 
一 的 区 别 在 于 ， 在 比较 的 时 候 是 否 会 进行 数据 类 型 的 转换 。== 在 比较 的 时 候 不 会 对 数据 类 


FE as 
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型 进行 转换 。 在 ECMAScript 标准 中 ， 将 其 称 为 严格 相等 〈strict equal )。 详 细 的 内 容 将 在 之 后 进一步 说 
明 ， 现 在 先 讨论 字符 串 比较 的 问题 。 如 果 只 考虑 字符 串 之 间 的 比较 ， 和 == 的 结果 是 没有 区 别 的。 两 
种 方式 都 会 判断 字符 串 的 内 容 是 否 一 致 。 下 面 是 具体 的 例子 。 
> Var Sl] 
eS vars2 
js> var s3 


I SL = 
true 

















// 字符 串 的 内 容 是 相同 的 


中 


js> s1 === S83; // 字符 串 的 内 容 是 相同 的 


Ce 
SS 
false 
je SI l= a 
false 


此 外 ， 还 能 够 对 JavaScript 中 的 字符 串 值 进行 大 小 比较 运算 ， 为 此 分 别 有 > 运算 符 、>= 运算 符 、< 
运算 符 和 <= 运算 符 。 对 字符 串 值 的 比较 基于 Unicode 字符 的 编码 值 ( 编码 位 置 )。 请 参见 下 面 的 例子 。 


js> var sl 
js> var s2 
> S12 
Ee 

Ee EL = ee 














Cue 
3 
false 
Ee a = ee 
false 





ll 


下 面 是 比较 大 小 时 Unicode 的 编码 位 置 的 一 些 典 型 情况 。 要 深入 理解 这 部 分 的 内 容 ， 需 要 有 Unicode 
的 相关 知识 ， 不 过 只 要 能 记 住 以 下 的 情况 ， 就 多 少 能 进行 运用 了 "。 

@ 英文 字母 是 字典 顺序 ( ABC 顺序 ) 

@ 英文 的 大 写字 母 在 小 写字 母 之 前 

@ 数字 和 符号 在 英文 字母 之 前 ( 不 过 有 些 符 号 是 在 英文 字母 之 后 的 ) 

@ 日 文 的 平 假名 在 片 假 名 之 前 

@ 日 文 的 平 假 名 和 片 假名 都 是 字典 顺序 ( 加 \ 改 5 元 村 顺序 ) 

@ 日 文 浊音 和 半 浊 音 的 顺序 则 是 按 以 下 的 规律 排列 : 和信、( 王 、( 竹 、( 委 、 坏 

@ 日 文 汉字 在 平 假名 和 片 假名 之 后 

@ 日 文 汉字 的 排列 顺序 视 计 算 机 的 具体 情况 而 定 ( 有 些 是 按照 音 读 的 字典 顺序 ) 

在 实际 中 ， 只 有 英语 单词 的 大 小 比较 是 有 意义 的 。 平 假名 字符 串 和 片 假 名 字符 串 的 比较 虽然 也 能 
强 进行 ,不 过 在 其 中 还 包含 有 日 文 汉字 的 情况 下 ， 由 于 还 要 考虑 计算 机 系统 的 差异 ， 所 以 这 样 的 比较 对 
于 用 户 来 说 并 没有 实际 意义 。 


国 3.3.4 字符 品类 ( String 类 ) | 


之 前 提 到 ， 在 JavaScript 中 字符 串 型 是 一 种 内 建 类 型 。 不 过 JavaScript 的 字符 串 也 有 容易 使 人 混 消 的 
地 方 ， 即 除了 内 建 类 型 的 字符 串 之 外 还 存在 一 个 字符 串 类 。 

字符 串 类 的 名 称 为 String。JavaScript 中 字符 串 型 和 String 类 的 关系 ， 大 致 相当 于 Java 中 数值 型 和 包 
装 类 型 (Number 类 和 Integer 类 ) 的 关系 。 字 符 串 型 和 String 类 之 间 也 同样 支持 隐 式 类 型 转换 。 在 Java 


























中 中 文 汉字 的 情况 则 更 为 复杂 ， 是 按 《 康 照 字典 》 的 部 首 顺序 以 及 笔画 顺序 进行 排序 的 ， 有 兴趣 的 读者 可 以 进一步 阅读 相 
关 材 料 。 一 一 译 者 注 
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中 存在 装 箱 和 拆 箱 转换 ， 在 JavaScript 的 字符 串 型 和 String 类 之 间 也 有 着 类 似 的 转换 。 这 一 转换 通常 是 隐 
式 进行 的 。 例 如 ， 可 以 像 下 面 这 样 获取 字符 串 值 的 字数 。 


Te Van ie = Ol2 Uy 


JsS es lengen // 在 形式 上 类 似 于 读 取 字 符 串 值 的 属性 


本 1012' .lenght; // 在 形式 上 类 似 于 读 取 字符 串 字 面 量 的 属性 

3 

上 述 代码 中 ， 其 内 部 发 生 了 字符 串 值 到 String 对 象 ” 的 隐 式 数据 类 型 转换 。 

表面 上 ， 这 里 的 代码 行为 和 Java 相 类 似 (在 Java 中 也 可 以 执行 "012".length0 )， 但 其 实 两 者 在 语法 
意义 上 是 不 同 的 。Java 的 字符 串 字 面 量 生成 的 是 String 类 的 对 象 ， 所 以 这 里 的 点 运算 符 的 含义 其 实 是 一 
般 意 义 上 的 对 类 方法 的 调用 。 

另 一 方面 ,在 JavaScript 中 书写 '012'.lenght 的 话 ,( 属于 内 建 类 型 的 ) 字符 串 值 会 先 被 隐 式 地 转换 为 
字符 串 对 象 ， 然 后 再 读 取 字 符 串 对 象 的 length 属性 。 

当然 了 ， 过 分 在 意 内 部 实现 细节 ， 反 而 违背 了 JavaScript 编程 的 初衷 。 其 实 只 要 简单 地 按照 表面 上 的 
样子 ， 将 〈 属于 内 建 类 型 的 ) 字符 串 值 当 作 一 种 对 象 来 使 用 也 没有 问题 。 


国 3.3.5 字符 串 对 旬 | 


可 以 使 用 new 运算 符 ， 来 显 式 地 生成 一 个 字符 串 对 象 。 在 第 5 章 中 ， 将 会 进一步 详细 说 明 new 运算 
符 ， 这 里 先 理解 下 面 的 例子 就 可 以 了 。 
var sobj = new String('abc'); // 生成 字符 串 对 象 
不 过 ， 因 为 像 之 前 代码 中 所 述 的 那样 ， 字 符 串 值 能 够 被 隐 式 转换 为 字符 串 对 象 ， 所 以 在 实际 中 几乎 
不 使 用 new 来 生成 字符 串 对 象 。 
隐 式 类 型 转换 也 能 反 向 进行 。 在 下 面 的 例子 中 ， 代 码 中 sobj 所 引用 的 字符 串 对 象 被 转换 为 了 字符 串 
值 之 后 ， 通 过 + 运算 符 对 其 进行 了 字符 串 的 连接 。 































































































js> var s = sobj + 'def'; // 将 字符 串 对 象 隐 式 转换 为 了 字符 串 值 


js> "print te) 
lelele [= 


字符 串 值 和 字符 串 对 象 之 间 可 以 进行 隐 式 类 型 转换 。 因 此 ， 一 般 来 说 并 不 需要 在 意 值 和 对 象 之 间 的 
区 别 。 不 过 正 因 看 起 来 非常 相似 ， 所 以 会 存在 一 些 陷阱 。 例 如 ， 在 判定 两 者 是 否 相 等 上 是 有 差异 的 。 对 
象 的 相等 运算 ,判断 的 是 两 者 是 否 引用 了 同一 个 对 象 ( 而 非 两 者 的 内 容 是 否 相 同 )。 请 看 下 面 的 例子 。 


js> var sobjl1l = new String('abc'); 

ue Te) li Shemeu hoe (| ore 

js> sobj1 == sobj2; // 虽然 字符 串 的 内 容 相 同 ， 但 是 并 非 引 用 了 同一 个 对 象 ， 所 以 结果 是 false 
false 

js> sobjl === sobj2; // 虽然 字符 串 的 内 容 相同 ， 但 是 并 非 引 用 了 同一 个 对 象 ， 所 以 结果 是 false 


false 

下 面 的 规则 或 许 会 让 你 感到 有 些 不 可 思议 : 上 面 的 两 个 字符 串 对 象 ， 在 通过 + 与 空 字符 串 值 连接 之 
后 ， 就 会 进行 隐 式 数据 类 型 转换 而 变 为 字符 串 值 ， 从 而 结果 也 将 发 生变 化 。 

// 继续 之 前 的 代码 ( 以 下 只 是 用 于 说 明 的 代码 ， 实 际 中 并 不 推荐 这 样 使 用 ) 


本 二 OBE VL sm SODI2 4 0 









































true 
本 局 三 下 全 个 有 村 了 4 WI ee SOBj2 4 
EU 








对 于 字符 串 值 和 字符 串 对 象 的 等 值 判断 ， 如 果 使 用 的 是 会 进行 隐 式 数据 类 型 转换 的 == 运算 ， 则 只 会 





中 在 本 书 中 ， String 类 的 实例 被 称 为 String 对 象 或 是 字符 串 对 象 。 
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判定 其 内 容 是 否 相同 ， 如 果 内 容 相同 则 结果 为 真 。 


I ue seo 人 三 EnewESESISL eaDS 本 
SEVERE EEC 


js> sobj == 8; // 进行 数据 类 型 转换 的 等 值 运算 的 结果 为 true 


七 YUe ; 

js> sobj === S) // 不 进行 数据 类 型 转换 的 等 值 运算 的 结果 为 false 

false 

对 于 比较 大 小 运算 ， 字 符 串 对 象 和 字符 串 值 一 样 ， 都 是 比较 其 字符 串 内 容 。 因 此 可 以 认为 ， 这 时 字 
符 串 值 和 字符 串 对 象 之 间 没 有 区 别 。 


国 3.3.6 避免 混 用 字符 串 值 和 字符 串 对 象 | 


在 必要 的 时 候 ， 可 以 使 用 typeof 运算 来 判别 一 个 字符 串 是 字符 串 值 还 是 字符 串 对 象 。 字 符 串 对 象 的 
typeof 运算 结果 为 "object"。 


Svar sopy new Stsnal(abe JR 
js> typeof sobj; 












































object 


要 防止 混用 字符 串 值 和 字符 串 对 象 是 很 简单 的 ， 只 要 不 显 式 地 使 用 new String0 即 可 。 也 就 是 说 ， 应 





该 避免 显 式 地 生成 字符 串 对 象 。 

需要 使 用 字符 串 值 的 时 候 ， 一 般 都 使 用 字符 串 字 面 量 。 对 于 其 余 的 情况 ， 只 要 像 下 面 那样 ， 通 过 
String 函数 进行 显 式 的 数据 类 型 转换 就 足够 了 。 

避免 显 式 地 生成 字符 串 对 象 并 不 意味 着 要 避免 使 用 字符 串 对 象 ， 应 该 是 积极 地 使 用 隐 式 数据 类 型 变 
换 ， 将 字符 串 值 转换 为 字符 串 对 象 。 不 需要 特别 考虑 内 部 结构 ， 仅 仅 从 表面 上 来 看 ， 转 换 为 字符 串 对 象 
后 ， 只 要 在 字符 串 值 之 后 写 上 点 运算 符 和 属性 名 ， 就 能 对 字符 串 进 行 各 种 各 样 的 操作 了 。 

可 以 像 下 面 这 样 对 字符 串 值 调用 各 种 方法 ， 这 在 实际 使 用 中 非常 方便 。 后 面 3.3.8 节 介 绍 的 一 些 其 他 













































































方法 也 会 以 这 样 的 形式 被 调用 。 


I els (Telosen // 返回 字符 串 值 下 标 为 1 的 字符 
J Ss harmaAt (le, 
Le 





js rabe CharaAe (Ll) 
b 





3.3.7 调用 String 函数 | 
通过 new 运算 符 调用 字符 串 ( 这 种 做 法 称 为 构造 函数 调用 ) 容易 引起 混淆 。 事 实 上 ， 仅 通过 调 
String 函数 就 可 以 生成 字符 串 值 。 一 般 来 说 ,使 用 String 函数 是 为 了 进行 显 式 的 数据 类 型 转换 。 
svares stonol( ape 
EE ee 变量 s 的 值 是 字符 串 型 


string 


EE 数值 类 型 向 字符 串 值 类 型 的 显 式 数据 类 型 变换 














村 








JSS eres) 
47 

js> typeof s; 
string 





国 3:.3.8 String 类 的 功能 lL 


表 3.2 对 String 类 的 函数 以 及 构造 函数 调用 进行 了 总 结 。 
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表 3.2 String 类 的 函数 以 及 构造 函数 调用 











String([value]) 将 参数 value 转换 为 字符 串 值 类 型 
new String([value]) 生成 String 类 的 实例 












































表 3.3 对 String 类 的 属性 进行 了 总 结 。 可 以 通过 类 似 于 String.fromCharCode(0x41) 这 样 的 形式 使 用 。 
表 3.3 String 类 的 属性 




















属性 名 说 明 

fromCharCode([char0[ char1, ...]] 将 参数 value 转换 为 字符 串 值 类 型 
length 值 为 1 

prototype 于 原型 链 





























表 3.4 对 String.prototype 对 象 所 具有 的 属性 进行 了 总 结 。 


表 3.4 _ String.prototype 对 象 所 具有 的 属性 
属性 名 说 明 
返回 下 标 pos 位 置 字符 的 长 度 为 1 的 字符 串 值 。 下 标 从 0 开始 。 如 果 超 过 了 下 标的 范围 ， 则 





























































































































charAt(pos) 返回 空 字符 串 值 
charCodeAt(pos) 返回 下 标 pos 位 置 字符 的 字符 编码 。 如 果 超 过 了 下 标的 范围 ， 则 返回 NaN 
concat([string0, string1, ...]) 和 参数 字符 串 值 相连 接 之 后 返回 新 的 字符 串 值 
constructor 引用 一 个 String 类 对 象 
返回 在 字符 串 中 第 一 个 遇 到 的 字符 串 值 searchString 的 下 标 值 。 可 以 通过 第 二 个 参数 指定 搜 


























indexOf(searchStringl, pos]) 

















索 的 起 始 位 置 。 如 果 没 有 找到 符合 条 件 的 结果 ， 则 返回 - 


































































































































































































localeCompare(that) 比较 和 本 地 运行 环境 相关 的 字符 串 。 根 据 比 较 的 结果 分 辨 返回 正 数 、0 或 者 负数 

match(regexp) 返回 匹配 正则 表达 式 regexp 的 结果 

quote() JavaScript 自 定义 的 增强 功能 。 在 字符 串 外 加 上 双 引 号 之 后 返回 这 一 新 的 字符 串 值 

ribodls carolVelue replacevalue) 等 searchValue ( 正则 表达 式 或 者 字符 串 值 ) 替换 为 replaceValue ( 字符 串 或 者 函数 ) 后 返 世 

“ 经 过 替换 后 的 字符 串 

search(regexp) 返回 匹配 正则 表达 式 regexp 的 位 置 的 下 标 

le end) 等 参数 start 开始 至 end 结束 的 字符 串 部 分 作为 新 字符 串 值 返回 。 如 果 start 和 end 是 负数 ， 
" 则 返回 从 末尾 逆向 起 数 的 下 标 值 。 

split(separator, limit) 根据 字符 串 或 是 正则 表达 式 形式 的 参数 separator 将 字符 串 分 割 ， 返 回 相应 的 字符 串 值 数组 






































JavaScript 自 定 义 的 增强 功能 。 返 回 从 参数 start 开始 长 度 为 length 的 新 字符 串 值 。 如 果 start 
是 负数 ， 则 从 末尾 逆向 起 数 
每 参数 start 开始 至 end 结束 的 字符 串 部 分 作为 新 的 字符 串 值 返回 。 其 作用 和 slice 相同 , 但 
是 不 支持 以 负数 作为 参数 

















substr(start[, length]) 



























































Substring(start, end) 













































































































































































































































































oLocaleLowerCase!l) 梅 字符 串 中 的 所 有 字符 转换 为 和 本 地 环境 相应 的 小 写字 符 
oLocaleUpperCasel) 每 字符 串 中 的 所 有 字符 转换 为 和 本 地 环境 相应 的 大 写字 符 

OoLowerCasel() 每 字符 串 中 的 所 有 字符 转换 为 小 写字 符 

oSource!() JavaScript 自 定 义 的 增强 功能 。 返 区 生成 String 实例 的 字符 串 ( 即 源 代码 ) 
oStringl 秆 String 实例 转换 为 字符 串 值 ( 并 返回 ) 

oUpperCasel) 每 字符 串 中 的 所 有 字符 转换 为 大 写字 符 

riml 除 字符 串 前 后 的 空白 符 

dl JavaScript 自 定义 的 增强 功能 。 去 除 字符 串 左 侧 ( 头 部 ) 的 空白 符 

rimRightl JavaScript 自 定义 的 增强 功能 。 去 除 字符 串 右 侧 ( 尾部 ) 的 空白 符 

valueOf() 等 String 实例 转换 为 字符 串 值 并 返回 ” 


























表 3.5 对 String 类 的 实例 属性 进行 了 总 结 。 可 以 通过 类 似 于 strlength 的 形式 来 使 用 String 对 象 。 
表 3.5 String 类 的 实例 属性 











属性 名 说 明 
( 内 部 属性 ) 字符 串 值 
length 字符 串 长 度 ( 字符 数 ) 




















还 可 以 像 下 面 这 样 ， 通 过 数值 属性 获取 指定 下 标的 字符 〈 不 过 这 是 JavaScript 自 定义 的 增强 功能 )。 











0 





中 返回 该 字符 事 对 象 的 原始 值 。 一 一 译 者 注 
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其 返回 值 是 一 个 String 对 象 。 


SS ver oe mew ocrmno( abe 





TEs // 下 标 为 1 的 字符 
b 


J oe (eed [2 // 由 于 有 隐 式 数据 类 型 转换 ， 所 以 对 字符 串 值 也 能 进行 这 样 的 操作 


已 





国 3.3.9 非 破坏 性 的 方法 | 


字符 串 对 象 和 字符 串 值 一 样 ， 是 不 可 变 的 。 也 就 是 说 ， 不 能 改写 字符 串 的 内 容 。 正 如 表 3.4 所 述 ， 
所 有 要 改变 字符 串 内 容 的 方法 ， 都 会 生成 一 个 新 的 字符 串 对 象 然 后 将 其 返回 。 


> Var eT mew Socino( abe ne 














js> var s2 = s.toUpperCase(); // 调用 对 象 s 的 toUpperCase 方法 
en el // 对 象 s 的 内 容 不 发 生变 化 
abc ABC 


js> s[0] = 'A'; // 即使 是 Javascript 独 有 的 [] 运算 也 不 会 改写 字符 串 的 内 容 
IE JEunslls)s 
abc 











改变 内 部 状态 的 方法 被 称 为 破坏 性 的 方法 。 在 之 后 将 会 详 述 的 Array 类 中 有 大 量 破坏 性 的 方法 ， 与 
String 类 形成 鲜明 对 比 。 一 般 来 说 ， 非 破坏 性 的 方法 更 好 一 些 。 不 过 在 有 些 时 候 ， 非 破坏 性 方法 的 效率 
会 相对 较 低 。 更 为 详细 的 内 容 请 参见 5.12 市 。 


| 3.4 数值 型 











国 3.4.1 数值 字面 量 | 


在 JavaScript 中 ， 数 值 的 内 部 结构 为 64 位 的 浮 点 小 数 。 不 过 在 实际 的 编程 中 ,使 用 整数 的 情况 会 更 
多 。 不 管内 部 构造 如 何 ， 从 JavaScript 的 代码 上 来 看 ， 只 要 是 写 为 整数 就 能 够 作为 整数 使 用 ， 而 不 必 考 虑 
是 否 是 浮 点 数 的 问题 。 因 为 所 有 的 数值 都 是 浮 点 小 数 ， 所 以 其 运行 效率 多 少 会 有 些 下 降 。 因 此 对 于 比较 
注重 运行 效率 的 程序 来 说 ，JavaScript 可 能 并 不 是 合适 的 选择 。 

由 于 整数 型 和 浮 点 数 型 在 使 用 上 没有 差别 ， 所 以 不 会 发 生 和 类 型 转换 相关 的 错误 。 当 然 ， 浮 点 小 数 
本 身 所 具有 的 缺点 依然 存在 。 不 过 对 于 大 部 分 现代 程序 设计 语言 来 说 ， 如 果 要 使 用 小 数 ， 这 些 问 题 还 是 
难以 避免 。 

数值 字面 量 的 具体 示例 请 参见 表 3.6。 


表 3.6 ”数值 字面 量 的 例子 
具体 示例 说 明 






































































































































0 整数 

51 整数 

-7 负 整 数 ( 从 语法 上 来 看 ， 负 号 是 单 目 运算 符 ) 

OX1f 16 进 制 数 ( 从 a 至 f 的 字母 部 分 也 可 以 写作 大 写 。0x 也 可 以 用 0X 代替 ) 
3.14 实数 

.14 实数 。 与 0.14 相等 

3e2 3 乘 以 10 的 2 次 方 , 即 300。e 也 可 以 写作 E 

3.14e2 3.14 乘 以 10 的 2 次 方 ， 即 314 

3.14e-2 3.14 乘 以 10 的 -2 次 方 ， 即 0.0314 
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下 面 是 使 用 数值 字面 量 的 代码 示例 。 


Es ve ni = 1 // 将 数值 1 赋值 给 变量 nl1 
js> var n2 # // 将 数值 2 赋值 给 变量 n2 


BS ml // 将 变量 nl 的 值 与 变量 n2 的 值 相 加 

3 

JavaScript 也 支持 8 进 制 的 数值 字面 量 ， 但 是 ECMAScript 标准 并 不 支持 。 这 仅仅 是 为 了 向 下 兼容 性 
而 保留 的 功能 ， 不 推荐 在 实际 中 使 用 。 

可 以 通过 typeof 运算 符 来 判断 数值 的 类 型 。 对 于 数值 来 说 ，typeof 运算 符 返 回 的 结果 是 字符 串 值 


"number"。 








4 
js> typeof n; ES Eb ey 
Durmbet 


js> typeof 1; ESE e 本 
Dumbet 





故 3.4.2 数值 型 的 运算 


对 于 数值 可 以 进行 + (加 法 )、- (减法 )、* (乘法 )、/( 除 法) 四 则 运算 。 通 过 % 符号 则 可 以 进行 
求 模 运算 ( 即 计算 除法 运算 后 的 余数 ) 其 他 的 运算 类 型 请 参见 第 4 章 。 

需要 注意 的 是 ， 尽 管 从 代码 上 来 看 进行 的 是 整数 运算 ， 但 其 实在 其 内 部 进行 的 仍然 是 浮 点 数 运算 。 
例如 ， 对 0 作 除法 并 不 会 得 到 错误 的 结果 ， 而 是 会 得 到 一 个 特殊 的 数值 。 这 点 将 在 之 后 详 述 。 

在 JavaScript 标准 对 象 中 有 一 个 Math 对 象 。 该 对 象 定义 了 圆周 率 PL、 自 然 对 数 的 底数 E 等 数学 党 
量 ， 以 及 一 些 相关 的 数学 函数 。 例 如 ， 可 以 通过 Math pow 函数 计算 2 的 10 次 方 。 更 详细 的 内 容 请 参见 
5.21 2 六 5 


国 3.4.3 ”有关 浮 点 数 的 常见 注意 事项 | 


这 里 列举 一 些 有 关 浮 点 数 的 常见 注意 事项 。 在 使 用 其 他 程序 设计 语言 中 的 double 型 或 是 float 型 时 
也 同样 应 该 注意 这 些 问题 。 在 其 他 的 程序 设计 语言 中 由 于 需要 开发 者 显 式 地 使 用 浮 点 型 数值 ， 因 此 在 
使 用 时 会 更 加 注意 。 而 在 JavaScript 中 ， 由 于 总 是 会 使 用 浮 点 小 数 ， 因 此 这 些 问 题 常 常会 被 忽视 。 

首先 ， 要 说 一 些 可 能 让 不 了 解 浮 点 数 的 人 感到 惊讶 的 事实 。 对 于 浮 点 数 来 说 ， 有 时 候 并 不 能 正确 地 
表达 小 数 点 以 后 的 部 分 。 实 际 上 ， 能 够 正确 表达 一 个 数 的 值 反 而 是 一 种 例外 ， 大 部 分 情况 下 浮 点 数 只 能 
表达 数值 的 近似 值 。 

下 面 是 一 个 非常 著名 的 例子 。 即 使 是 这 样 简单 的 运算 ， 也 无 法 获得 正确 的 结果 。 

JSST 0 0.1 与 0.2 的 和 并 不 是 0.3。 

0.30000000000000004 

(0 0 

false 


Ss> (OL + O21 sa O03 
false 
























































a a 

由 几 烽 候 总 芽 次 旦 宦 民 是 公 代 汇 信 这 1 

JSS L033 

0Q3333333333333333 

IES (LS = = (0 这 两 个 近似 值 是 不 一 致 的 。 
false 

JS (M/s = 2 sea WE) 

false 
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对 于 浮 点 数 来 说 ， 要 执行 正确 的 实数 运算 是 不 可 能 的 。 稍 加 注意 就 会 发 现 ， 这 并 不 是 个 应 该 如 何 避 
免 的 问题 ， 而 是 从 原理 上 就 是 无 法 回避 的 。 对 于 整数 的 情况 ， 则 可 以 保证 在 53 位 的 范围 内 能 有 正确 的 结 
果 。 因 此 ， 如 果 只 是 使 用 53 位 以 内 的 整数 的 话 ， 就 不 会 有 任何 问题 。 

如 果 需 要 用 到 数值 正确 的 实数 ， 就 必须 使 用 类 似 于 Java 中 的 BigDecimal 类 的 实数 库 。 目 前 ， 
JavaScript 并 没有 标准 的 实数 库 。 不 过 也 有 特殊 情况 ， 如 果 是 在 JVM 下 使 用 Rhino (一 种 基于 Java 的 开 
源 JavaScript 实现 ) 的 话 ， 就 能 够 直接 使 用 Java 的 BigDecimal 类 了 。 


图 3.4.4 数值 类 ( Number 类 ) | 


正如 存在 字符 串 类 ( String 类 )，JavaScript 中 也 存在 数值 类 ( Number 类 )。 字 符 串 值 和 字符 串 类 在 经 
过 隐 式 数据 类 型 转换 之 后 ， 就 基本 能 够 以 相同 的 方式 使 用 ， 与 此 类 似 ， 经 过 数据 类 型 转换 之 后 ， 数 值 和 
数值 对 象 也 能 被 视 为 等 价 的 。 

例如 ， 可 以 对 一 个 数值 调用 下 面 这 样 的 方法 。 和 字符 串 对 象 的 情况 类 似 ， 在 内 部 其 实 是 隐 式 地 生成 




































































了 数值 对 象 ， 不 过 也 并 不 需要 对 此 特别 在 意 。 


了 // 为 了 区 分 小 数 点 和 点 运算 符 而 必须 使 用 括号 。 
1 


js> typeof (1) .toString() ; // 确认 是 否 确实 是 从 数值 转换 为 了 字符 串 。 

string 

可 以 通过 new 运算 符 来 显 式 地 生成 数值 对 象 。 和 字符 串 对 象 的 情况 类 似 ， 这 将 引起 等 值 运算 的 混乱 ， 
所 以 如 果 没 有 特殊 的 理由 ， 不 建议 使 用 显 式 的 数值 对 象 。 

js> var nob] = new Number (1); 

Js> Var nobj1 = new Number (1); 

js> nobj == nobjl; 虽然 值 是 相同 的 ， 但 是 所 引用 的 对 象 不 同 ， 因 而 结果 为 false 

false 


js> nobj === nobj1; 虽然 值 是 相同 的 ， 但 是 所 引用 的 对 象 不 同 ， 因 而 结果 为 false 


false 
js> nobj == 1; 会 进行 数据 类 型 转换 的 等 值 运算 结果 为 true 
不 会 进行 数据 类 型 转换 的 等 值 运算 结果 为 false 














由 于 会 进行 隐 式 数据 类 型 转换 ， 因 此 数值 和 数值 对 象 在 外 表 上 是 没有 什么 区 别 的 。 如 有 必要 ， 可 以 
通过 typeof 运算 对 其 进行 判断 。 对 数值 对 象 执行 typeof 运算 的 结果 为 "object"。 


js> var mobj = new Number'(1); 
js> typeof nobj; 
object 











国 3.4.5 调用 Number 酉 数 | 
和 String 函数 类 似 ， 以 通常 的 方式 调用 Number 函数 的 话 ， 将 返回 相应 的 数值 。 在 需要 显 式 地 进行 
数据 类 型 转换 的 时 候 ， 可 以 使 用 Number 函数 。 


Ee nll Nl or ne (le 
js> typeof nl; // 变量 n1 的 值 为 数值 


js> var n = Number('1'); // 从 字符 串 值 至 数值 型 的 显 式 数据 类 型 转换 
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se primt ln 


二 


如 果 参 数 无 法 被 转换 为 数值 类 型 ，Number 函数 返回 的 结果 将 是 NaN。 使 用 new 运算 符 ( 构造 函数 
调用 ) 的 情况 也 是 如 此 "。 


js> Var wm = Numoer( eo) 
1s BEinC (ny 

NIN 

js> typeof n; 

Durmbet 





























js> var nobj = new Number('x'); 
a hse ol 

NaN 

Is tyvpeorf nobd; 

object 





闻 3.4.6 Number 类 的 功能 | 
表 3.7 对 Number 类 的 函数 以 及 构造 函数 调用 进行 了 总 结 。 
表 3.7 Number 类 的 函数 以 及 构造 函数 调用 








Number([value]) 将 参数 value 转换 为 数值 类 型 
new Number([value]) 生成 Number 类 实例 


























表 3.8 对 Number 类 的 属性 进行 了 总 结 。 可 以 以 类 似 于 NumberNaN 的 方式 来 使 用 这 些 属性 。 
表 3.8 Number 类 的 属性 



























































属性 名 说 明 

prototype 原型 名 

length 值 为 1 

MAX_VALUE 64 位 浮 点 小 数 所 支持 的 正 数 最 大 值 
MIN_VALUE 64 位 浮 点 小 数 所 支持 的 正 数 最 小 值 
NaN 含义 为 Not a Number 的 值 
NEGATIVE_INFINITY 表示 负 无 穷 大 的 值 
POSITIVE_INFINITY 表示 正 无 穷 大 的 值 














表 3.9 对 Number.prototype 对 象 的 属性 进行 了 总 结 。 
表 3.9 Number.prototype 对 象 的 属性 


















































































































































属性 名 说 明 

constructor 引 个 Number 类 对 象 

toExponential(fractionDigits) 转换 为 指数 形式 的 字符 串 值 。fractionDigits 为 小 数 点 位 数 
toFixed(fractionDigits) 转换 为 小 数 点 形式 的 字符 串 值 。fractionDigits 为 小 数 点 位 数 

toLocaleString() 转换 为 和 本 地 环境 相对 应 的 字符 串 值 

toPrecision(precision) 转换 为 小 数 点 形式 的 字符 串 值 。precision 为 有 效 数 字 

toSourcel() JavaScript 自 定义 的 增强 功能 。 返 区 成 String 实例 的 字符 串 ( 即 源 代码 ) 
toString([radix]) 将 Number 实例 转换 为 字符 串 值 。 人 参数 radix 为 其 基数 

valueOf() 将 Number 实例 转换 为 数值 




















表 3.10 对 Number 类 的 实例 属性 进行 了 总 结 。 





QD 关于 NaN， 将 会 在 之 后 进行 详细 说 明 。 
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表 3.10 Number 类 的 实例 属 


性 











( 内 部 属性 ) 数值 





上 3.4.7 边界 值 与 特殊 数值 | 
可 以 通过 Number 对 象 的 属性 值 来 获知 64 位 浮 点 数 所 支持 的 最 大 正 值 和 最 小 正 值 。 如 果 在 其 之 前 添 
加 负 号 (运算 符 )， 就 能 够 获得 相应 的 最 大 负 值 和 最 小 负 值 “。 


js> Number .MAX VALUE; 
1.7976931348623157e+308 





























js> Number .MIN VALUE; 
5e-324 


js> -Number.MAX VALUE 
- 工 .7976931348623157e+308 


js> Number .MIN VALUE; 
-5e-324 


还 可 以 通过 NumberMAX _ VALUE.toString(16) 来 获得 相应 的 16 进 制 数值 ， 由 于 结果 较 长 ， 这 里 就 
不 列 出 了 ， 有 兴趣 的 读者 可 以 自己 再 确认 一 下 。 

在 JavaScript 中 ， 浮 点 数 的 内 部 结构 遵循 IEEE754 标准 。 可 以 通过 Number 对 象 的 属性 值 来 获得 在 
IEEE754 中 定义 的 一 些 特殊 数值 。 表 3.11 对 此 做 了 总 结 。 


表 3.11 浮 点 小 数 的 特殊 数值 
























































Number.POSITIVE_INFINITY 正 无 穷 大 
Number.NEGATIVE_INFINITY 负 无 穷 大 
Number.NaN ot a Number 

















对 其 进行 实际 求 值 的 结果 如 下 。 
js> Number.POSITIVE INFINITY; 


Tn Lr ty 


js> Number .NEGATIVE INFINITY; 
-Infinity 


js> Number .NaN; 
NIN 


从 内 部 结构 来 看 ， 这 3 个 特殊 数值 ( 即 正 负 无 穷 大 与 NaN ) 都 是 基于 正 EE754 标准 的 比特 位 数值 。 
虽然 它们 在 形式 上 属于 数值 (fypeof 运算 符 对 它们 的 执行 结果 为 number )， 但 是 并 不 能 作为 数值 进行 计 
算 。 例 如 ， 将 最 大 正 数 值 乘 以 2 之 后 能 够 得 到 正 无 穷 大 ， 但 反之 则 不 成 立 ， 正 无 穷 大 除 以 2 之 后 无 法 得 
到 最 大 正 数值 。 

事实 上 ， 这 3 个 特殊 数值 对 于 任何 运算 都 无 法 得 到 通常 的 数值 结果 。 

js> var inf = Number.MAX VALUE * 2; 


js> print (inf); // 将 最 大 正 数 值 乘 以 2 之 后 能 够 得 到 正 无 穷 大 
Tn 























ES de // 再 除 以 2 之 后 却 无 法 得 到 原 值 
下 二 了 人 








中 +0 和 -0 在 语法 规则 上 确实 存在 区 别 ， 不 过 在 实际 中 并 不 需要 对 此 加 以 区 分 ( 它们 仅仅 是 为 了 定义 正 负 无 穷 大 而 已 )。 
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0 // 即使 乘 以 0， 得 到 的 结果 也 不 是 0 


NIN 


NaN 是 3 个 特殊 数值 中 最 为 特别 的 ，3.4.8 节 中 将 对 其 进行 单独 说 明 。 


国 :.48 NaN | 


对 NaN 进行 任何 运算 ， 其 结果 都 是 NaN。 因 此 ， 如 果 在 计算 过 程 中 出 现 了 一 次 NaN， 最 终 的 结果 就 
一 定 会 是 NaN。 

















js> NaN + 1; 
NaN 

js> NaN * 0; 
NN 

js> NaN - NaN; 





NaN 的 运算 还 具有 更 为 特别 的 性 质 。NaN 不 但 不 与 其 他 任何 数值 相等 ， 就 算是 两 个 NaN 的 等 值 判 
断 ， 其 结果 也 为 假 。 





// 该 表达 式 的 结果 显然 为 false 
// 该 表达 式 的 结果 显然 为 false 
// 该 表达 式 的 结果 也 是 false 


js> NaN === NaN) // 该 表达 式 的 结果 依然 是 false 
false 


NaN 对 于 各 种 比较 运算 的 结果 也 总 是 








由 此 可 见 ， 对 于 值 为 NaN 的 数值 是 无 法 进行 判断 的 。 不 过 在 JavaScript 中 预定 义 了 一 个 全 局 函数 
isNaN。isNaN 函数 的 返回 值 为 真 的 条 件 是 其 参数 的 值 为 NaN， 或 是 在 经 过 数据 类 型 转换 至 数值 类 型 后 值 
为 NaN。 














js> isNaN (NaN); 
true 


js> var nanobj = new Number (NaN); // NaN 值 的 Number 对 象 
js> typeof nanobj; 

object 

js> isNaN (nanobj); // 这 里 也 为 真 


true 


js> isNaN({}); // 将 其 转换 为 数值 类 型 之 后 值 为 NaN 


true 


而 预定 义 全 局 函数 isFinite 可 以 对 3 个 特殊 数值 ( 即 NaN 与 正 负 无 穷 大 ) 之 外 的 数值 进行 判断 。 


js> Lapinite(l)y 
Lp b= 
js> isFinite (NaN); 








false 
a= Tapinlitelinfinity)s 
false 
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js> isFinite(-Infinity); 


false 


可 以 通过 特定 的 运算 来 得 到 特殊 数值 结果 ( 表 3.12 )。 不 过 在 实际 编程 过 程 中 ， 故 意 产 生 Infinity 或 
是 NaN 的 情况 十 分 少见 。 事 实 上 ， 不 小 心 在 运算 过 程 中 生成 的 特殊 数值 往往 是 发 生 错 误 的 根源 。 


表 3.12 ”可 以 得 到 浮 点 数 特殊 数值 的 运算 





























通常 数值 0.0 无 穷 大 NaN 
通常 数值 无 穷 大 0.0 x 

0.0 0.0 NaN NaN 
无 穷 大 通常 数值 无 穷 大 NaN 
无 穷 大 无 穷 大 NaN NaN 





























Infinity 和 NaN 都 是 预定 义 的 全 局 变量 ， 所 以 从 语法 规则 的 角度 来 看 ， 其 值 是 可 以 改变 的 〈 当然 不 推 
荐 这 么 做 )。 不 过 即使 改变 了 它们 的 值 ， 只 要 进行 表 3.12 中 的 和 运算， 就 能 够 很 容易 地 恢复 Infinity 和 NaN 
的 初始 值 。 

// 以 下 是 ECMAScript 第 5 版 中 的 结果 





Ie NaN = 
ls > etNaND 
NaN 


ls > mtime 
se (rn 
Infinity 


在 ECMAScript 第 5 版 中 , 已 将 NaN 和 Infinity 改 为 了 只 读 变 量 ， 因 此 不 能 再 对 它们 进行 数值 更 改 。 
需要 注意 的 是 ， 在 对 它们 进行 赋值 的 过 程 中 并 不 会 报错 。 

















| 3.5 布尔 型 





国 3.5.1 布尔 值 | 


布尔 型 也 被 称 为 逻辑 值 类 型 或 者 真 假 值 类 型 。 布 尔 型 只 能 够 取 真 ( true ) 和 假 ( false ) 两 种 数值 。 除 
此 以 外 ， 其 他 的 值 都 不 被 支持 。 

下 面 是 使 用 了 布尔 型 的 具体 代码 示例 。 

sovar Flag = Eruer 

J prime (tlag) 

Cm 

SE pre ela 

false 

Js> pine leltag)s 

true 


true 和 false 定义 为 了 字面 量 。 字 面 量 的 使 用 方法 与 在 代码 中 使 用 数值 的 方法 类 似 ， 将 它们 理解 为 等 价 
的 行为 即 可 。 也 就 是 说 ，var flag =true 这 一 代码 中 true 的 地 位 ， 就 和 代码 varn =0 中 数值 0 的 地 位 相同 。 
对 布尔 值 进 行 typeof 运算 的 话 ， 得 到 的 结果 为 "Boolean"。 


js> typeof true; 
Boolean 

















js> typeof false; 
llolo -he 


关于 布尔 值 运算 的 相关 说 明 ， 请 参见 第 4 章 。 
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图 3.5.2 布尔 类 ( Boolean 类 ) | 
布尔 类 ( Boolean 类 ) 是 一 种 布尔 型 的 包装 类 型 。 其 地 位 以 及 使 用 方法 和 String 类 以 及 Number 类 相同 。 














像 下 面 这 样 对 布尔 值 使 用 点 运算 符 的 话 ， 就 能 够 对 布尔 值 进行 隐 式 数据 类 型 转换 ， 将 其 转 为 布尔 对 
象 。 但 是 ， 布 尔 类 中 并 没有 什么 实用 的 方法 ， 所 以 基本 上 也 很 少 会 去 使 用 。 
js> true.tostring(); // 隐 式 数据 类 型 转换 为 了 Boolean 对象 





LU 


和 String 以 及 Number 一 样 ， 它 也 可 以 通过 new 运算 符 显 式 地 生成 布尔 对 象 。 不 过 也 与 String 和 
Number 的 情况 类 似 ， 一 般 来 说 没有 必要 显 式 地 生成 布尔 对 象 。 


js> var 七 = new Boolean(true) ; // 构造 函数 调用 

> 

te 

js> typeof t; // 布尔 对 象 

object 

J SS (mAs // 进行 数据 类 型 转换 的 等 值 运算 结果 为 true 
ue 

js> t === true; // 不 进行 数据 类 型 转换 的 等 值 运 算 结果 为 false 


false 


通过 调用 Boolean 函数 可 以 将 任意 值 显 式 地 转换 为 布尔 值 。 不 过 根据 具体 的 代码 语 境 ， 必 要 时 , 一 
个 值 将 会 被 隐 式 地 转换 为 布尔 值 类 型 ， 所 以 一 般 来 说 ， 并 不 需要 显 式 地 进行 数据 类 型 转换 。 


js> var tval = Boolean (true); // 通过 函数 调用 来 进行 显 式 的 数据 类 型 转换 
js> typeof tval; 

llolo -7=he 

js Cvals 

true 

2 Eval = EPEUey 

Ere 

je> "Eval =s= tey 

true 




















国 3.5.3 Boolean 类 的 功能 | 
表 3.13 对 Boolean 类 的 函数 以 及 构造 函数 调用 进行 了 总 结 。 
表 3.13 Boolean 类 的 函数 以 及 构造 函数 调用 








Boolean(value) 将 参数 value 转换 为 布尔 值 类 型 
new Boolean(value) 生成 Boolean 类 实例 

















表 3.14 对 Boolean 类 的 属性 进行 了 总 结 。 
表 3.14 “Boolean 类 的 属性 


























属性 名 说 明 
prototype 原型 链 
length 值 为 1 




















表 3.15 对 Boolean.prototype 对 象 的 属性 进行 了 总 结 。 


表 3.15 ”Boolean.prototype 对 象 的 属性 







































































属性 名 说 明 

constructor 对 Boolean 类 对 象 的 引 

toSourcel) JavaScript 自 定 义 的 增强 功能 。 返 回 用 于 生成 Boolean 实例 的 字符 串 ( 即 源 代码 ) 
toString!() 将 Boolean 实例 转换 为 字符 串 值 

valueOf() 将 Boolean 实例 转换 为 布尔 值 
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表 3.16 对 Boolean 类 的 实例 属性 进行 了 总 结 。 


表 3.16 ”Boolean 类 的 实例 属性 








( 内 部 属性 ) 布尔 值 
toSource!) JavaScript 自 定义 的 增强 功能 。 返 




















口 



































成 Boolean 实例 的 字符 串 ( 即 源 代码 ) 




















3.6 null 型 


null 值 的 意义 存在 于 对 象 引用 之 中 。null 值 最 初 的 含义 为 “没有 引用 任何 对 象 " 。null 型 只 能 够 取 
null 这 一 个 值 。null 值 是 一 个 字面 量 。 由 于 只 支持 null 这 个 值 ， 所 以 将 null 型 称 为 一 种 类 型 未 免 有 些 奇 
怪 。 不 过 从 语法 规则 上 来 看 ，null 型 确实 是 一 种 数据 类 型 。 

然而 , 对 null 值 进行 typeof 运算 得 到 的 结果 也 是 "object" ( 具体 原因 尚 不 得 知 ) "。 因 此 , 尽管 其 他 的 
基本 数据 类 型 都 可 以 通过 typeof 运算 来 进行 类 型 判断 ， 但 对 于 null 型 来 说 ， 就 必须 通过 和 null 值 的 等 值 
判断 才能 确定 其 类 型 。 


js> typeof null; // typeof 运算 的 结果 为 'object' 
object 


null 型 没有 与 之 相对 应 的 Nul 类 。 因 此 ， 如 果 像 下 面 这 样 对 null 值 进行 点 运算 ， 就 会 产生 TypeError 异常 。 


5S null COStrLing(0)s 
TypeError: null has no properties 


和 其 他 程序 设计 语言 一 样 ，null 值 可 能 引发 各 种 各 样 的 错误 ， 其 中 大 部 分 和 数据 类 型 转换 以 及 一 些 
运算 有 关 。 这 部 分 内 容 将 在 之 后 的 章节 中 再 进行 说 明 。 

































































3.7 undefined 型 








undefined 型 只 能 够 取 undefined 这 一 个 值 。 对 undefined 值 进行 typeof 运算 ， 其 结果 为 "undefined"。 


js> typeof undefined; // typeof 运算 的 结果 为 字符 串 值 ' undefined' 


undefined 


从 代码 上 来 看 ，undefined 值 似乎 和 null 值 一 样 都 是 一 种 字面 量 。 但 实际 上 ， 它 并 非 字 面 量 ， 而 是 一 
个 预定 义 的 全 局 变量 。 

由 于 有 这 样 的 设 定 ， 也 就 不 难 理解 ， 可 以 像 下 面 这 样 对 变量 undefined 进行 赋值 。 当 然 ， 本 身 并 不 应 
该 进行 这 样 的 操作 。 


// ECcMAscript 第 5 版 之 前 的 结果 


























js> undefined = 'abc'; // 对 名 称 为 undefined 的 全 局 变量 进行 赋值 


I onealst dasel)y 
Elele 

js> typeof undefined; 
string 








由 于 undefined 在 ECMAScript 第 5 版 中 变 为 了 只 读 变 量 ， 所 以 上 面 的 赋值 是 无 效 的 。 但 是 需要 注意 
的 是 ， 这 样 的 赋值 并 不 会 引起 错误 。 


// ECMAScript 第 5 版 中 的 结果 


中 也 有 人 认为 这 是 JavaScript 本 身 的 一 个 bug。 
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js> undefined = 'abc'; 


js> print (undefined); 
undefined 





图 undefined 值 | 


在 本 书 中 ， 将 undefined 型 的 值 称 为 undefined 值 。 这 与 将 字符 串 类 型 的 值 称 为 字符 串 值 是 一 样 的 道 
理 。 下 面 的 说 法 听 起 来 或 许 有 些 麻烦 ， 但 是 应 当 认 识 到 全 局 变量 undefined 与 undefined 值 的 关系 其 实 就 
是 这 样 的 : 首先 有 了 undefined 型 的 值 ， 之 后 才 将 该 值 赋值 给 了 全 局 变量 undefined。 

将 这 个 值 本身 称 为 undefined 值 ， 其 实 是 有 些 不 自然 的 ， 这 就 好 比 是 在 将 数值 0 赋值 给 变量 i 之 后 ， 
就 将 数值 0 称 为 i 值 一 样 。 不 过 ， 这 个 有 些 麻烦 的 问题 在 实际 中 并 没有 什么 影响 。 从 结果 上 来 看 ， 与 数 
值 或 是 字符 串 值 的 情况 不 同 ，undefined 型 的 值 就 只 有 这 一 个 了 了。 因此， 尽管 会 有 些 不 自然 ， 这 里 还 是 继 
续 使 用 undefined 这 种 说 法 。 

null 是 一 种 字面 量 而 undefined 是 一 个 变量 名 ， 这 并 不 是 一 种 偶然 。 要 使 一 个 变量 的 值 为 null， 就 必 
须 将 null 以 字面 量 的 形式 赋值 给 该 变量 。 因 此 从 语言 规则 的 角度 来 说 ，null 必须 是 一 种 字面 量 。 另 一 方 
面 ，undefined 值 最 多 只 能 算是 某 个 没有 经 过 显 式 赋值 的 变量 的 初始 值 。 所 以 根据 字面 含义 ,将 其 称 为 未 
定义 值 或 是 未 初始 化 值 都 没有 问题 。 

可 以 像 下 面 这 样 对 此 进行 确认 。 


js> var u; // 只 是 被 声明 了 的 变量 





















































SS yDeoreu, // 该 变量 的 值 为 undefined 值 
undefined 


也 就 是 说 ， 从 语法 规则 上 来 看 ，undefined 这 一 标识 符 并 不 是 必需 的 。 这 是 因为 只 需 将 全 局 变量 undefined 
赋值 给 没有 被 赋值 的 变量 就 可 以 了 。null 值 指 的 是 没有 引用 任何 对 象 的 状态 ， 尽 管 从 含义 上 来 看 是 否定 的 ， 
但 仍然 是 有 其 含义 的 。 而 undefined 值 则 不 同 ， 像 它 的 字面 意思 那样 ， 仅 仅 指 的 是 一 个 尚未 定义 的 值 。 


























对 于 undefined 值 来 说 ， 并 不 存在 与 之 相对 应 的 Undefined 类。 因此 如 果 像 下 面 这 样 对 undefined 值 
进行 点 运算 ， 将 会 产生 TypeError 异常 。 











js> undefined.tostring(); 
TypeError: undefined has no properties 


下 面 总 结 了 会 出 现 undefined 值 的 情况 。 

@ 未 初始 化 的 变量 的 值 

@ 不 存在 的 属性 的 值 

@ 在 没有 传 入 实 参 而 调用 函数 时 ， 该 函数 内 相应 参数 的 值 

@ 没有 return 语句 或 是 return 语句 中 不 含 表达 式 的 函数 的 返回 值 

@ 对 void 运算 符 求 值 的 结果 ( 常常 会 通过 使 用 void 0 来 获取 一 个 undefined 值 ) 


上 一 节 中 的 null 值 可 能 会 引起 程序 出 错 ， 而 undefined 值 比 它 更 容易 引发 错误 。 令 情况 更 为 混乱 的 
是 ， 如 果 对 null 值 和 undefined 值 做 进行 数据 类 型 转换 的 等 值 运算 (== )， 结 果 为 真 。 此 外 ， 对 于 不 进行 
数据 类 型 转换 的 等 值 运算 (=== )， 其 结果 则 为 假 。 

undefined 值 是 一 种 有 着 非常 高 的 潜在 出 错 风险 的 语言 特性 ， 所 以 在 使 用 undefined 值 时 请 多 加 留心 。 






































3.8 | Object 类 型 


除了 基本 类 型 之 外 ， 其 他 的 所 有 类 型 都 是 Object 类 型 。 之 后 将 会 详 述 对 象 的 概念 。 这 里 只 要 先知 道 
在 5 种 基本 数据 类 型 之 外 还 有 一 种 Object 类 型 即 可 。 
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对 Object 类 型 进行 typeof 运算 ， 得 到 的 结果 是 "object"。 
IE // 生成 空 的 对 象 


js> typeof obj; // 对 变量 obj 所 引用 的 对 象 进行 typeof 运算 
mobjecEe” 





国 Function 类 型 | 


对 于 JavaScript 中 是 否 存 在 Function 类 型 ， 人 们 的 意见 尚未 统一 。 我 的 意见 是 ， 只 要 将 Function 类 
型 认为 是 Object 类 型 的 一 种 类 型 就 足够 了 。 在 此 只 需要 了 解 ， 对 一 个 函数 进行 JavaScript 标准 的 类 型 判 
定 方法 ， 也 就 是 其 typeof 运算 的 结果 为 字符 串 "function"。 


3.9 | 数据 类 型 转换 


JavaScript 这 种 语言 很 容易 在 进行 数据 类 型 转换 时 发 生 错误 。 因 为 不 具有 强 数据 类 型 ， 所 以 会 有 大 量 
的 隐 式 数据 类 型 转换 。JavaScript 会 根据 上 下 文 语 境 ， 自 动 地 进行 数据 类 型 转换 。 例 如 ， 无论 对 让 条 件 语 
句 使 用 怎样 的 值 ， 该 值 都 将 被 转换 为 布尔 型 。 

语句 中 所 写 的 值 也 会 被 转换 为 和 运算 符 相 对 应 的 值 。 例 如 ， 某 个 值 与 字符 串 值 和 连接 运算 符 (+ 号 ) 
相连 的 话 ， 不 管 该 值 是 哪 种 类 型 ， 它 都 将 被 自动 转换 为 字符 串 型 。 

这 样 的 隐 式 数据 类 型 转换 ， 虽然 有 不 需要 进行 显 式 的 数据 类 型 转换 ， 以 及 不 会 产生 类 型 不 一 致 错误 
的 优点 ， 但 是 也 有 不 足 ， 且 其 中 很 多 错误 只 有 在 运行 时 才能 被 发 现 。 

不 过 ， 要 是 由 于 过 分 担心 隐 式 数据 类 型 转换 可 能 造成 的 问题 ， 而 始终 使 用 显 式 的 数据 类 型 转换 的 话 ， 
又 不 符合 JavaScript 编程 的 风格 。JavaScript 注重 的 是 灵活 运用 隐 式 数据 类 型 转换 ， 以 写 出 简洁 的 代码 。 
虽然 确实 存在 着 不 少 陷阱 ， 但 在 必要 的 时 候 ， 应 灵活 使 用 显 式 的 数据 类 型 转换 。 


国 3.9.1 从 字符 串 值 转换 为 数值 | 


下 面 是 一 些 从 字符 串 值 转换 为 数值 的 具体 示例 。 

通常 的 做 法 是 使 用 Number 函数 、parseInt 函数 和 parseFloat 函数 。Number 函数 的 书写 最 为 简单 ， 不 
过 需要 注意 的 是 ， 对 于 像 '100x' 这 样 的 包含 非 数 字 的 字符 串 值 ， 函 数 返 回 的 结果 将 是 NaN。 而 parseInt 
和 parseFloat 将 会 忽略 数字 以 外 的 其 他 字符 ， 所 以 '100x' 将 被 转换 为 100。parseInt 函数 还 可 以 通过 第 
二 参数 来 指定 转换 时 所 采用 的 基数 (radix )。 如 果 省 略 该 参数 则 默认 进行 10 进 制 转换 。 

js> typeof Number('100'); // 将 字符 串 值 '100' 转换 为 数值 100 


number 

js> NumBer(’L00x'): 
VEIN 

js> parseInt ('100'); 
100 

js> parselnCH LO0x AT 
100 

js> parseInt ('x' 

VEIN 

js> parseInt(' 

255 

js> parseInt(' 

于 

js> parseInt(' 

NE 

> Paraelne to ln) 
0 

js> parseFloat ('0.1'); 
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接 下 来 说 明 一 下 从 字符 串 值 到 数值 的 隐 式 数据 类 型 转换 。 只 要 在 数值 运算 操作 数 的 位 置 上 书写 字符 
串 值 ， 该 值 就 将 被 隐 式 地 转换 为 数值 类 型 。 下 面 是 一 些 具体 的 例子 。 
// 字符 串 值 '100' 被 转换 为 了 数值 100 
// 两 个 操作 数位 置 的 字符 串 值 被 转换 为 了 数值 
// 之 后 将 会 说 明 将 字符 串 转换 为 数值 的 惯用 方式 





如 果 是 加 法 运算 ， 则 不 一 定 能 获得 期 望 的 结果 。 这 是 因为 对 于 + 运算 来 说 ， 如 果 操 作 数 中 含有 字符 
串 值 ， 它 就 将 变 为 字符 串 连接 运算 。 于 是 发 生 的 就 不 再 是 从 字符 串 值 到 数值 的 数据 类 型 转换 ， 而 是 从 数 
值 到 字符 串 值 的 数据 类 型 转换 了 。 这 一 点 在 下 一 节 中 也 将 进行 说 明 。 

IE v1OO" “ Lp // 不 再 是 数值 加 法 ， 而 是 字符 串 连接 运算 

1001 

Te loo // 即使 第 一 个 操作 数 是 数值 ， 也 是 字符 串 连接 运算 

1100 




















二 运算 在 作为 单 目 运算 符 的 情况 下 则 是 正 号 运算 。 这 时 操作 数 将 被 转换 为 数值 类 型 。 不 过 由 于 正 号 
运算 没有 任何 实质 意义 ， 所 以 其 作用 就 仅仅 是 将 字符 串 值 转换 为 数值 。 

JESUEYEEEERTOO // 将 字符 串 值 '100' 转换 为 数值 100 

人 = 一 

js> typeof +s; // 将 字符 串 值 '100' 转换 为 数值 100 


number 














国 3.9.2 从 数值 转换 为 字符 串 值 | 


下 面 来 看 一 下 将 数值 转换 为 字符 串 值 的 情况 。 首 先是 显 式 数据 类 型 转换 的 例子 。 通 常 的 做 法 是 使 用 
String 函数 ,或 是 在 对 数值 对 象 进行 了 隐 式 数据 类 型 转换 之 后 ， 再 对 其 调用 toString 方法 。 

js> typeof String(100); // 将 数值 100 转换 为 字符 串 值 '1001 

String 


js> typeof (100) .tostring(); // 将 数值 100 转换 为 字符 串 值 '100'。 为 了 区 分 小 数 点 和 点 运算 符 而 必须 使 用 括号 


Stzring 











SE van 9 

js> String(n); // 将 数值 n 转换 为 字符 串 值 
100 

js> n.tostring(); // 将 数值 n 转换 为 字符 串 值 
100 








接 下 来 看 一 下 隐 式 数据 类 型 转换 。 在 字符 串 运 算 的 操作 数位 置 上 写 数 值 的 话 ， 就 将 对 其 进行 隐 式 数据 
类 型 转换 。 以 下 是 具体 的 例子 。+ 运算 符 的 操作 数 中 如 果 含 有 字符 串 ， 则 会 作为 字符 串 连 接 运 算 符 使 用 。 


J rEeoon 100 // 数值 100 被 转换 为 了 字符 串 值 '1001 
fool100 


J 00 3 Oy // 就 算数 值 位 于 左 操作 数 的 位 置 也 一 样 会 被 转换 为 字符 串 值 














// 将 数值 n 转换 为 字符 串 值 


foo0100 





国 .9.s 数据 类 型 转换 的 惯用 方法 | 
正如 之 前 所 介绍 的 ， 可 以 通过 多 种 方式 来 实现 数据 类 型 转换 。 具 体 哪 种 方法 的 运行 速度 更 快 和 具体 
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的 实现 有 关 ， 不 能 一 概 而 论 。 此 外 ， 对 于 客户 端 JavaScript 的 情况 ， 重 要 的 不 仅仅 是 需要 考虑 代码 的 运行 
速度 ， 还 应 当 尽 可 能 地 缩短 源 代 码 的 长 度 。 只 有 缩短 代码 长 度 才 能 够 减少 网 络 传输 的 时 间 。 因 此 ， 以 较 
短 的 代码 长 度 实现 数据 类 型 转换 的 写法 成 为 了 首选 。 

下 面 是 最 为 简短 的 数据 类 型 转换 写法 。 虽 然 使 用 String(n) 或 Number(s)， 代 码 可 读 性 可 能 会 更 高 一 
些 ， 不 过 这 样 的 写法 能 够 实现 更 好 的 性 能 。 

// 惯用 的 数据 类 型 转换 方法 ( 最 简短 的 写法 ) 

// 从 数值 转换 为 字符 串 什 


二 


J // 将 数值 3 转换 为 字符 串 值 '3' ( 利用 了 字符 串 连接 运算 符 ) 














// 从 字符 串 值 转换 为 数值 
Sa 


ES EE // 将 字符 串 值 '3' 转换 为 了 数值 3 ( 利用 了 正 号 运算 ) 





表 3.17 列 出 了 在 字符 串 值 和 数值 之 间 进 行 类 型 转换 时 需要 注意 的 地 方 。 隐 式 数据 类 型 转换 虽然 简 
单 ， 但 容易 引发 错误 。 最 为 典型 的 错误 就 是 在 将 字符 串 值 转换 为 数值 类 型 时 ， 其 结果 可 能 会 是 NaN。 
正如 3.4.8 节 所 述 ， 一 旦 在 运算 中 出 现 了 NaN， 整 个 数值 运算 的 结果 都 将 变 为 NaN。 这 样 不 仅 无 法 






























































得 到 正确 的 结算 结果 ， 而 且 无 法 通过 逆向 的 数据 类 型 转换 来 得 到 原来 的 字符 串 。 

表 3.17 在 字符 串 值 和 数值 之 间 进 行 数据 类 型 转换 时 需要 注意 的 地 方 

转换 的 对 象 数据 类 型 转换 结果 

无 法 被 转换 为 数值 的 字符 串 值 转换 为 数值 类 型 数值 NaN 

空 字符 串 值 转换 为 数值 类 型 数值 0 

数值 Na 转换 为 字符 串 型 字符 串 "NaN" 

数值 Infinity 转换 为 字符 串 型 字符 串 "Infinity" 

数值 -Infinity 转换 为 字符 串 型 字符 串 -Infinity" 

国 3.9.4 转换 为 布尔 型 | 








在 实际 编程 中 ， 从 其 他 类 型 向 布 尔 型 的 数据 类 型 转换 是 很 重要 的 。 在 让 语句 或 是 while 语句 等 的 条 
件 表达 式 中 ,会 有 很 多 这 样 的 隐 式 数据 类 型 转换 。 下 面 列举 了 在 类 型 转换 后 结果 为 false 的 值 。 除 此 之 外 
的 值 都 将 被 转换 为 true。 

@ 数值 0 

@ 数值 NaN 

@ null 值 

@ undefined 值 

@ 字符 串 值 " ( 空 字符 串 值 ) 

请 看 下 面 的 例子 ， 下 面 的 代码 中 在 让 语句 的 条 件 表达 式 里 写 了 数值 0。 在 经 过 隐 式 数据 类 型 转换 之 
后 ， 它 将 变 为 布尔 型 的 false。 


SE (OD (en lee ee 
F 











尽管 也 可 以 通过 Boolean 函数 ， 将 一 个 值 显 式 地 转换 为 布尔 型 。 不 过 通常 来 说 ， 都 是 像 下 面 这 样 ， 
使 用 !! 来 进行 隐 式 的 数据 类 型 转换 的 。 

! 运算 是 用 于 布尔 型 操作 数 的 逻辑 非 运 算 。 在 操作 数 不 是 布尔 型 的 情况 下 会 自动 将 其 转换 为 布尔 型 。 
因此 只 要 使 用 !! 这 样 的 双重 否定 ， 就 能 够 将 值 转换 为 布尔 型 。 


js> Ls 
EU 
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可 局 二 全 人 
true 
no 
false 


Te 
false 

js> tnwlls 
false 


在 进行 布尔 型 的 数据 类 型 转换 时 ， 应 当 对 Object 类 型 的 情况 多 加 注意 。Object 类 型 在 被 转换 为 
布尔 型 之 后 结果 必定 为 true。 以 下 代码 的 结果 都 是 显示 T。 这 和 直观 的 感觉 是 有 所 不 同 的 ， 所 以 请 务 
必 注 意 。 


TSS Var. be 
ee) 











new Boolean (false); 
Tm es en ee 


new Number (0) ; 
Mn es en re 


Var 2 = 
sa (ve 


Var Ss = 
Es 


new String(''); 
‘re nelse pelme (ee 





而 像 下 面 这 样 ， 通 过 函数 调用 方式 获得 的 结 
一 来 ， 转 换 的 结果 就 会 与 直觉 一 致 。 


js> var b = Boolean(false); 
Tes ee Me ee ue ee opal ns 


就 不 再 是 Object 类 型 ， 而 是 相应 的 内 建 类 型 了 。 这 样 




















Number (0); 
(esha en 


Var ZzZ = 


te } else { print('F'); } 


Var Ss = 
i Ey) 


SL 


‘pri else (pele (ee 





国 3.9.5 其 他 的 数据 类 型 转换 | 
表 3.18 总 结 了 对 布尔 值 、null 值 和 undefined 值 进行 数据 类 型 转换 时 的 情况 。 
表 3.18 ”对 布尔 值 、null 值 和 undefined 值 进行 数据 类 型 转换 的 情况 











被 转换 的 值 转换 为 数值 型 转换 为 字符 串 型 
true 1 true 

false 0 false 

null 值 0 ul 
undefined 值 NaN "undefined 

















上 3.9.6 从 Object 类 型 转换 为 基本 数据 类 型 


下 面 总 结 了 从 Object 类 型 转换 为 基本 数据 类 型 的 规则 ， 以 及 进行 显 式 数据 类 型 转换 的 方法 ( 表 


3.19 )。 其 中 变量 obj 是 某 一 对 象 的 引用 。 


表 3.19 对 Object 类 型 进行 数据 类 型 转换 
转换 后 的 类 型 


显 式 数 据 类 型 转换 方法 
String(obj) 








字符 串 型 











将 toString() 方法 的 结果 转换 为 字符 串 型 
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( 续 ) 





























显 式 数据 类 型 转换 方法 
pe 即 valueOf 方法 的 结果 。 如 果 valueOf 方法 的 结果 无 法 被 转换 为 数值 型 , 则 
数值 型 Numbertop) 改 将 toString 方法 的 结果 转换 为 数值 型 
布尔 型 Boolean(obj) 总 是 true 
undefined 值 NaN undefined 
下 面 是 将 Object 类 型 分 别 显 式 地 与 隐 式 地 转换 为 字符 串 型 的 示例 。 


js> var obj = {}; // 生成 空 对 象 

js> obj + ''; // 将 对 象 隐 式 地 转换 为 字符 串 型 ( 通过 字符 串 连 接 运 算 符 ) 
[object Object] 

eS Eal(lob // 将 对 象 显 式 地 转换 为 字符 串 型 

[object Object] 


上 面 的 结果 是 调用 了 对 象 obj 的 toString 方法 而 得 到 的 。 如 果 像 下 面 这 样 ， 改 变 了 toString 方法 的 实 
现 的 话 ， 结 果 也 将 随 之 发 生变 化 。 


opi ostrinog( 到 // 确认 当前 tostring 方法 的 结果 
[object Object] 











js> obj.tostring = function() { return 'MyObj'; } // 重 写 toString 方法 的 实现 
To oe en // 确认 toString 方法 的 结果 
MyOb]j 


J GY // 将 对 象 隐 式 地 转换 为 字符 串 型 
UNA) on] 
js> String (obj); // 将 对 象 显 式 地 转换 为 字符 串 型 
MAO) en] 





3.9.7 从 基本 数据 类 型 转换 为 Object 类 型 | 
下 面 总 结 了 从 基本 数据 类 型 转换 为 Object 类 型 的 规则 ( 表 3.20 )。 
表 3.20 ”转换 为 Object 类 型 




















被 转换 值 的 类 型 数据 类 型 转换 的 结果 
字符 串 型 String 对 象 

数值 型 Number 对 象 

布尔 型 Boolean 对 象 

null 型 Error 对 象 
undefined 型 Error 对 象 














和 基本 数据 类 型 之 间 的 类 型 转换 一 样 ，Object 类 型 和 基本 数据 类 型 之 间 的 数据 类 型 转换 ， 也 可 以 根 
据 上 下 文 语 境 隐 式 地 进行 。 因 此 ， 实 际 编程 中 ， 并 不 太 需 要 进行 显 式 的 数据 类 型 转换 ， 反 倒是 更 应 该 注 
意 避 免 由 于 隐 式 数据 类 型 转换 而 引发 的 错误 。 

随意 举 一 例 来 说 ， 下 面 的 代码 并 不 会 报错 ， 而 是 会 将 变量 obj 的 值 转换 为 NaN。 


js> var obj = {}; 


js> obj++; // 该 对 象 被 隐 式 地 转换 为 了 数值 型 





js> obj; // 变量 obj 的 值 为 NaN 
NaN 





上 面 的 代码 中 ，++ 运算 将 操作 数 转 换 为 了 数值 型 。 

如 果 一 个 对 象 没有 能 返回 恰当 数值 的 valueOf 方法 ， 或 是 能 返回 可 以 被 转换 为 恰当 数值 的 字符 串 的 
toString 方法 的 话 ， 它 在 被 转换 为 数值 型 之 后 的 结果 将 是 NaN。 又 因为 对 NaN 进行 + + 运算 的 结果 为 
NaN， 所 以 变量 obj 的 最 终 值 将 是 NaN。 
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专栏 





JavaScript 的 性 能 分 析 工 具 
使 用 性 能 分 析 工 具 ， 就 能 了 解 一 个 运行 中 的 JavaScript 程序 正在 执行 哪 一 个 函数 、 正 在 执行 哪 一 行 ， 以 
及 花费 了 多 少时 间 。 使 用 性 能 分 析 工 具 的 目的 通常 是 为 了 检查 程序 中 运行 速度 较 慢 的 部 分 。 这 样 的 部 分 被 称 
为 运行 瓶颈 。 根 据 经 验 ， 如 果 程 序 的 运行 很 慢 ， 很 有 可 能 是 其 中 某 一 部 分 花费 了 较 多 的 运行 时 间 。 因 此 ， 
如 果 提 高 了 瓶颈 部 分 的 执行 速度 ， 程 序 整体 的 运行 性 能 也 很 可 能 得 以 提高 。 反 过 来 说 ， 如 果 不 确定 程序 的 瓶 
颈 所 在 ， 就 胡乱 地 进行 性 能 优化 ， 效 果 往 往 差 强人 意 。 

程序 的 执行 时 间 并 不 仅仅 由 一 些 代码 的 处 理 时 间 决 定 。 对 于 客户 端 JavaScript 来 说 ， 以 下 几 个 因素 相 结 
合 最 终 决 定 了 用 户 的 实际 使 用 感受 。 

@ JavaScript 代码 的 执行 时 间 ( 这 也 是 仅 赁 性 能 分 析 工 具 所 能 测 得 的 ) 

@ DOM 的 泻 染 时 间 

@ 网 络 响应 时 间 


Firebug、IE 的 开发 者 工具 和 Chrome 的 开发 者 工具 都 具有 基本 的 性 能 分 析 功能 。 此 外 , 表 A 还 列举 了 一 
些 包 含 了 其 他 各 方面 的 分 析 测 试 功 能 的 性 能 分 析 工 具 。 
















































































































































































































































































































































































































































































表 A 性 能 分 析 工 具 
支持 的 浏览 如 

















YSlow Chrome/Firefox http://developer.yahoo.com/yslow/ 
Page Speed Chrome/Firefox http://code.google.com/speed/page—speed/ 
dynaTrace Firefox/IE http://ajax.dynatrace.com 
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言 的 过 程 中 还 有 其 他 一 些 必须 注意 的 地 方 。 


第 4 章 


语句 、 表 达 式 和 运算 符 


本 章 将 总 结 JavaScript 的 语法 规则 。 尽 管 JavaScript 在 语法 结构 上 , 有 不 少 地 方 和 Java 类 似 ， 
但 它 有 一 些 自己 独 有 的 语句 。 同 样 地 ,在 JavaScript 中 ,有 很 多 和 Java 相似 的 运算 符 和 表达 式 。 
不 过 ， 因 为 隐 式 的 数据 类 型 转换 在 JavaScript 中 非常 普遍 ， 所 以 与 Java 相 比 ， 在 使 用 这 一 语 


41 表达 式 和 语句 的 构成 





语句 、 表 达 式 和 运算 符 























JavaScript 的 源 代码 本 质 上 是 一 个 语句 的 集合 。 语 句 是 由 语句 和 表达 式 所 构成 的 。 表 达 式 则 由 表达 式 和 


运算 


2 


对 所 构成 。 这 种 在 自身 的 定义 





这 


人 要 今 
| / 心 


Wo 


号 或 是 分 号 等 )。 也 就 是 说 ， 即 使 在 一 条 语句 


7 人 可 能 会 觉得 ， 这 种 使 


























P 递 归 地 使 用 自身 的 定义 方式 ， 在 程序 设计 语言 中 相当 常见 。 
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] 了 自身 的 定义 方式 即使 在 经 过 了 无 限 次 循环 之 后 ， 也 无 法 真正 地 定义 出 




















不 过 事实 上 ， 语 句 和 表达 式 都 具有 不 需要 用 到 自身 定义 的 定义 方式 。 因 此 ， 这 种 递归 的 定义 
是 不 会 无 限 循环 下 去 的 。 对 于 语句 来 说 ， 最 终 都 可 以 被 分 解 为 保留 字 ( 之 后 将 详 述 )、 表 达 式 与 符号 ( 括 














P 包 含 








其 他 语句 ， 只 要 对 这 条 被 包含 的 语句 继续 进行 分 解 ， 





最 终 都 会 到 达 仅 包 含 保 留 字 、 表 达 式 与 符号 的 状态 。 对 于 表达 式 来 说 ， 虽 然 也 能 在 一 句 表达 式 中 包含 其 


他 的 表达 式 ， 不 过 只 要 对 所 包含 的 表达 式 继续 进行 分 


























数 名 )、 字 面 量 〈 即 直 接 写 出 其 值 的 数值 或 是 字符 中 























| 4.2 | 保留 字 


解 ， 最 终 总 是 能 达到 仅 包 含 标识 符 〈 变量 名 或 是 函 








Bl ) 与 运算 符 ( 符号 或 是 保留 字 ) 的 状态 。 
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表 4.1 JavaScript 的 保留 字 


PP， 保留 字 (reserved word ) 是 按照 如 下 方式 分 类 的 ( 表 4.1)。 






































名 称 说 明 
关键 字 请 参见 表 4.2 
今后 的 保留 字 请 参见 表 4.3 
null 字面 
true 字面 
false 字面 






































表 4.2 与 表 4.3 列 出 了 在 ECMAScript 中 所 定义 的 关键 字 或 是 为 以 后 预 留 的 保留 字 。 

















‖ 去 4.2 关键 字 
break do instanceof typeof 
case else new Var 
catch finally return void 
continue for switch while 
default if throw delete 
in try 
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| 表 4.3 今后 的 保留 字 





























class enum extends super const export 
import implements let private public yield 
interface package protected statics 











| 4.3 标识 符 




















标识 符 是 


有 所 限制 的 ， 不 过 只 要 不 与 保留 字 中 的 单词 重复 就 没有 问题 ， 所 以 实际 上 可 以 生成 无 限 多 的 标识 符 。 





发 者 在 程序 中 所 定义 的 单词 ， 例 如 变量 名 或 是 函数 名 。 虽 说 标识 符 中 可 以 使 用 的 字符 是 
其 





具体 的 命名 规则 如 下 。 
@ 必须 是 除 保留 字 以 外 的 单词 。 


@ 必须 是 除 true、false、null 以 外 的 单词 。 








@ 必须 是 以 Unicode 的 ( 非 空 ) 字符 开始 ， 之 后 接 有 Unicode 字符 或 是 数字 的 单词 。 
@ 单词 的 长 度 并 无 限制 。 











不 能 使 用 和 保留 字 相 同 的 单词 作为 标识 符 。 例 如 ， 如 果 有 一 个 函数 被 命名 为 do， 那么 就 会 引起 
仅仅 是 在 标识 符 的 字符 中 包含 了 保留 字 就 没有 问题 ， 例 如 doit 这 样 的 函数 名 就 





SyntaxError。 不 


是 合法 的 。 


true 、false 和 null 这 三 个 单词 是 字 
作 标 识 符 一 样 ， 

JavaScript 中 的 标识 符 都 是 以 Unicode 字符 所 
字 以 及 平 片 假名 )， 所 以 从 语法 上 来 说 ， 是 可 以 使 
原因 以 及 习惯 用 法 ， 并 不 推荐 使 用 日 文 作为 标识 符 ”。 在 实际 的 编程 过 程 中 


量 "abc" 不 能 被 








过 ， 如 司 















































掉 量 ， 不 能 被 用 作 标 识 符 。 就 好 上 























这 三 个 字 








条 量 也 不 能 被 用 作 标识 符 。 
有 成 的 单词 。Unicode 字符 中 包含 了 日 文字 符 (日 文 汉 


























] 日 文 作为 变量 名 以 及 








数值 字面 




















量 1 或 是 字符 串 字 国 




















函数 名 的 。 不 过 ， 由 于 一 些 历史 
P 应 


当 遵 循 以 下 的 规则 ， 即 应 该 


使 用 以 英文 字符 (大写 或 是 小 写 的 英文 字符 )、_ (下划线 字符 ) 或 是 $ ( 美元 字符 ) 开始 ， 之 后 接 有 英 
文字 符 、 、$、 数 字 (0 至 9 ) 的 单词 。 

下 面 是 一 些 标识 符 的 具体 例子 。 由 于 JavaScript 区 分 英文 字符 的 大 小 写 ， 所 以 foo 和 Foo 将 会 被 识别 
为 不 同 的 标识 符 。 








® foo 
@ Foo 
@ FOO 
@ fool 
@foo 1 
@ foo 
@S$ 

@ $foo 


习惯 上 ， 以 下 划 线 (_) 开始 的 标识 符 会 被 作为 “内 部 标识 符 ” 来 使 ) 









































j。 又 因为 在 prototype.js 中 ， 

















getElementById 函数 的 别名 被 记 为 了 $， 所 以 一 些 常 用 名 称 的 别名 常常 会 使 用 以 美元 符号 (0$ ) 开始 的 标 
识 符 。 
中 ”Unicode 字符 中 也 包含 了 繁 简体 中 文 汉字 等 各 类 中 文字 符 ， 同 样 不 推荐 在 标识 符 中 使 用 中 文字 符 。 译 者 注 
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| 4.4 字面 量 


字面 量 (literal ) 指 的 是 ， 在 代码 中 写 下 这 些 值 之 后 ， 将 会 在 运行 时 直接 使 用 这 些 值 的 字面 含义 。 有 
读者 也 许 会 觉得 ， 在 代码 中 书写 的 值 自然 会 在 运行 时 按 原样 表达 该 值 ， 不 过 事实 上 并 非 如 此 ， 请 看 下 面 
的 代码 。 

// 字符 串 字 面 量 "bar" 的 例子 

var foo = Ya 

根据 语法 规则 ， 代 码 中 的 var 这 个 词 的 含义 是 变量 的 声明 ， 因 此 ， 在 运行 中 var 并 不 会 被 识别 为 一 个 
内 容 为 var 的 单词 。 类 似 地 ，foo 这 个 词 在 运行 时 也 不 会 被 识别 为 一 个 内 容 为 foo 的 单词 ， 而 仅 被 认为 是 
变量 foo 所 表示 的 值 。 而 即使 把 代码 中 所 有 的 foo 都 改写 为 fpo2 也 不 会 改变 运行 结果 ， 通 过 这 一 事实 也 
能 进一步 理解 该 规则 。 

另 一 方面 ，"bar" 是 一 个 字符 串 字面 量 ， 所 以 bar 这 一 单词 在 运行 过 程 中 的 含义 就 是 bar 这 一 字符 序 
列 而 已 。 

数值 字面 量 的 情况 就 更 加 容易 理解 了 。 在 下 面 的 代码 中 写 有 两 个 数值 0。val0 中 的 0 是 其 变量 名 的 一 
部 分 ， 并 不 具有 数值 0 的 含义 。 这 个 0 已 经 失去 了 可 以 进行 算术 运算 的 性 质 ， 仅 仅 是 一 个 符号 。 

另 一 方面 ， 右 侧 的 字面 量 0 则 具有 数值 的 含义 。 

// 数值 字面 量 0 的 例子 


Var valO eS 0 


表 4.4 对 未 在 本 书 中 说 明 的 JavaScript 字面 量 进行 了 总 结 。 






























































































































































表 4.4 字面 量 
名 称 具体 示例 
数值 100 
字符 串 值 "foobar" 
布尔 什 true 
null 值 null 
Object {x:1, y:2} 
数列 [3, 1, 2] 
函数 function() { return 0; } 
正则 表达 式 /foo/ 

4.5 | 语句 








在 程序 设计 语言 中 ,语句 ( statement ) 的 定义 可 以 由 该 语言 经 过 明确 定义 的 语法 (syntax ) 规则 得 
到 ， 并 且 可 以 在 运行 程序 时 执行 (execute ) 语句 。 换 一 种 角度 来 说 的 话 ， 所 谓 运 行 一 个 程序 ， 指 的 就 是 
执行 程序 中 一 条 条 的 语句 “。 

虽然 说 ， 源 代码 中 的 语句 并 不 一 定 是 和 运行 中 的 每 一 步 一 一 对 应 的 ， 不 过 考虑 到 程序 在 运行 时 确实 
是 在 逐一 执行 语句 ， 所 以 在 概念 上 并 不 矛盾 。 

在 JavaScript 中 ， 语 句 之 间 使 用 分 号 分 隔 。 严 格 来 说 ， 分 号 只 是 一 部 分 语句 的 结尾 。 例 如 对 于 表达 式 
语句 ， 其 结尾 必须 使 用 分 号 ; 而 对 于 复合 语句 ， 其 结尾 则 是 不 需要 分 号 。 对 于 这 方面 的 规则 ，JavaScript 
和 Java 基本 相同 ， 不 过 JavaScript 对 于 分 号 的 使 用 限制 更 为 宽松 。 例 如 在 JavaScript 中 ， 换 行 时 所 省 略 的 













































































中 这 里 的 说 明 更 接近 于 过 程式 程序 设计 语言 中 的 说 法 ， 对 此 请 加 以 注意 。 
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分 号 将 被 自动 补 全 。 本 书 的 代码 范例 中 并 不 会 省 略 分 号 。 如 需 了 解 在 分 号 自动 补 全 过 程 中 可 能 会 引发 的 
问题 ， 请 参考 其 他 书籍 。 


| 46 代码 块 ( 复合 语句 ) 


代码 块 是 在 大 括号 ( {} ) 中 所 写 的 语句 ， 以 此 将 多 条 语句 的 集合 视 为 一 条 语句 来 使 用 。 这 样 一 来 ， 
从 语法 上 来 说 ， 代 码 中 所 有 能 够 书写 语句 的 地 方 都 可 以 书写 多 条 语句 。 代 码 块 的 例子 在 本 书 中 有 很 多 ， 
这 里 就 不 再 举例 了 。 

值得 注意 的 是 ，JavaScript ( 准确 地 说 是 ECMAScript ) 的 代码 块 中 的 变量 并 不 存在 块 级 作 
的 概念 。 详 细 情 况 请 参见 6.4 节 。 


变量 声明 语句 


变量 声明 语句 的 格式 为 ， 在 关键 字 var 之 后 跟 上 所 需 的 变量 名 。 在 多 个 变量 名 之 间 使 用 逗号 〈, ) 分 
隔 的 话 ， 就 能 够 同时 声明 多 个 变量 。 而 使 用 = 运算 符 ， 就 可 以 在 声明 的 同时 对 变量 进行 初始 化 。 有 关 变 
量 的 详细 说 明 ， 请 参见 第 5 章 。 


// 变量 声明 的 例子 






























































达 























4.7 




































































Var foo7 
Var foo0, bary // 同时 声明 多 个 变量 
Var foO MM HOO bare BAR // 在 声明 变量 的 同时 进行 初始 化 








| 4.8 ”| 函数 声明 语句 


JavaScript 中 的 函数 声明 语句 ， 和 Java 中 方法 的 定义 语句 在 语法 上 是 基本 相同 的 ， 不 同 之 处 在 于 ， 函 
数 声 明 语 句 并 不 是 以 返回 值 类 型 开始 ， 而 是 使 用 了 关键 字 function， 并 且 在 JavaScript 中 不 用 参数 指定 类 型 。 

尽管 在 ECMAScript 标准 中 ， 函 数 声 明 语句 并 没有 被 视 为 语句 的 一 种 ， 不 过 在 本 书 中 暂 不 考虑 这 种 
严格 的 语言 规则 ， 而 将 函数 声明 也 视 为 一 种 语句 。 














































































































// 函数 声明 语句 的 语法 

function 函数 名 ( 参数 ， 参 数 ，…… ) { 
语句 
语句 

} 














函数 名 和 参数 的 位 置 上 所 书写 的 是 标识 符 。 参 数 的 数量 没有 限制 ， 所 以 即使 一 个 参数 也 没有 关系 。 
大 括号 中 的 是 函数 体 ， 里 面 可 以 书写 多 条 语句 。 


4.9 | 表达 式 语句 


所 谓 表 达 式 语句 就 是 一 条 内 容 为 表达 式 的 语句 。 之 后 还 会 再 次 对 表达 式 进行 说 明 。JavaScript 不 同 于 
Java 那样 ，Java 只 有 一 部 分 的 表达 式 能 够 被 作为 语句 使 用 ， 而 在 JavaScript 中 ， 所 有 的 表达 式 都 可 以 被 
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说 属于 是 表达 式 语 句 。 





第 4 章 ， 语 句 、 表 达 式 和 运算 符 049 ©@ 


视 为 一 条 表达 式 语句 。 不 过 很 可 惜 ，JavaScript 的 这 一 特性 并 不 是 一 个 优点 。 


























例如 ， 下 面 这 样 的 无 意义 的 代码 并 不 会 引发 错误 。 这 是 因为 相等 运算 符 (== ) 的 表达 式 从 语法 上 来 
































// 虽然 没有 意义 ， 但 是 语法 上 并 没有 错误 的 代码 





var a; 
己 = 


= 0s // 一 条 表达 式 语句 ( 但 是 没有 任何 的 实际 效果 ) 











执行 上 面 的 表达 式 语 句 并 不 会 有 任何 效果 。 又 因为 不 会 引起 语法 错误 ， 所 以 即使 不 小 心 把 一 错 写 成 


了 = 也 不 容易 被 发 现 。 而 在 Java 中 ， 这 类 没有 意义 的 表达 式 语 句 将 会 引起 编译 错误 。 
问题 ， 反 而 是 一 种 优点 。 
前 面 已 经 举 了 一 个 没有 意义 的 表达 式 语句 的 例子 ， 而 在 有 意义 的 表达 式 语句 中 ， 
赋值 表达 式 和 函数 调用 表达 式 了 。 下 面 是 实际 的 例子 。 























// 表达 式 语句 的 例子 


Var BB 
Seo // 赋值 表达 式 的 表达 式 语句 
print (s); // 函数 调用 表达 式 的 表达 式 语句 


4.10 | 空 语句 


能 够 很 容易 地 发 现 





具有 代表 性 的 就 是 








仅 含 有 分 号 的 语句 就 是 空 语句 。 仅 在 一 部 分 场合 下 空 语句 才 有 其 使 用 价值 。 请 看 下 面 的 代码 。 























// 空 的 代码 块 
while (条 件 表达 式 ) { 
} 


// 包含 了 空 语句 的 代码 块 
while (条件 表达 式 ) { 


} 


// 仅 有 空 语 句 
while (条 件 表达 式 ) 











如 果 没有 这 村 





在 上 面 的 代码 中 即使 不 写 空 语句 ， 在 意义 和 语法 上 也 都 不 存在 问题 。 尽 管 如 此 ， 还 依然 写 了 空 语 名 














的 理由 ， 是 为 了 告诉 代码 的 阅读 者 ， 自 己 并 非 忘 了 在 代码 块 中 书写 语句 ， 而 是 特意 写 了 这 段 不 会 进行 任 
何 操作 的 代码 。 


4.11 “控制 语句 

















类 语法 规则 被 称 为 控制 语句 。 控 制 语句 包括 条 件 分 支 、 循 环 、 跳 转 ( 包括 异常 处 理 ) 这 3 类 。 

















有 了 控制 语句 之 后 ， 就 可 以 实现 顺序 执行 以 外 的 代码 执行 方式 。 
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的 控制 语句 ，JavaScript 在 理论 上 ， 是 按照 源 代 码 上 所 写 的 代码 顺序 从 上 至 下 地 执行 。 这 种 
执行 方式 被 称 为 “顺序 执行 ”。 
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4.12 | if-else 语句 


让 语 句 和 让 else 语句 的 语法 结构 如 下 。 其 中 的 条 件 表达 式 和 语句 不 能 省 略 。 




















// if 语句 的 语法 


if (条 件 表达 式 ) 
语句 








// if-else 语句 的 语法 


if (条件 表 达 式 ) 


语句 





else 
语句 


与 让 对 应 的 条 件 表达 式 及 语句 统称 为 辽 子 名 ， 而 与 else 对 应 的 条 件 表达 式 与 语句 则 统称 为 else 子 
句 。 可 以 把 半 表 达 式 看 作 if-else 表达 式 省 略 了 else 子 句 的 特殊 情况 。 因 此 在 下 文中 将 两 者 统一 作 if-else 
语句 处 理 。 

在 条 件 表达 式 的 位 置 所 写 的 式 子 ， 将 被 求 值 并 转换 为 布尔 型 。 这 一 隐 式 的 数据 类 型 转换 常常 会 带 来 
各 种 各 样 的 错误 。 对 于 布尔 型 的 数据 类 型 转换 中 需要 注意 的 地 方 ， 请 参见 3.9.4 节 进 行 确认 。 

下 面 是 一 个 这 else 语句 的 具体 示例 。 


// if-else 语句 的 例子 
二 = 多) 

Sen elavee 
else 


















































T 



































print ("else clause"); 
如 果 变 量 i 的 值 为 0， 则 输出 "if clause"， 否 则 ， 输 出 "else clause"。 
在 计 子 句 以 及 else 子 句 中 可 以 书写 任意 的 语句 。 又 因为 让 else 语句 本 身 也 是 语句 的 一 种 ， 所 以 也 能 够 
在 felse 语句 的 子 句 中 再 次 使 用 下 else 语句 。 下 面 是 一 个 在 直子 句 中 使 用 if-else 语句 的 例子 。 


We 
































un (0 
if "(== 0) 
aes (v=e0 Sl Is0)s 
else 
el l(a evael U0) 
else 


[oe be (es 
上 而 这 段 代码 的 执行 结果 和 所 预期 的 结果 是 一 致 的 。 接 下 来 再 来 考虑 一 下 没有 外 层 else 子 句 的 枢 套 
if-else 语句 的 情况 。 如 果 保 持原 有 的 缩 进 情况 不 变 ， 将 得 到 如 下 的 代码 。 
// 崩 套 if-else 语句 



































(ee 
(0 
oe na (Ve Era! Iss0 sp 
else 


em (Vl = evrel UOWs 
也 可 以 对 其 缩 进 进行 修改 ， 得 到 如 下 代码 。 


// 容易 混淆 的 缩 i 
if (I == 
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BE (0 == 0 
oes cmel, Te 

ES 
rosa He ciel Veo 


在 上 面 的 代码 中 ， 从 缩 进 方式 来 看 ， 似 乎 else 子 句 是 与 外 层 的 直子 句 ( 即 条 件 表达 式 为 ==0 的 证 子 
句 ) 相对 应 的 。 但 事实 上 ， 缩 进 对 代码 的 实际 意义 不 会 产生 影响 。 换 句 话说， 在 上 述 两 段 代 码 中 ， 必 然 
存在 一 组 代码 ， 其 实际 执行 方式 与 代码 缩 进 格式 所 暗示 的 方式 有 所 不 同 。 对 于 这 个 问题 的 回答 是 ， 由 于 
JavaScript 中 有 else 子 句 必定 与 最 邻近 的 让 子 句 相 结合 的 规则 ， 因 此 在 本 例 中 ，else 子 句 是 和 内 层 的 让 子 
句 ( 即 条 件 表达 式 为 j==0 的 让 子 句 ) 相对 应 的 。 这 也 就 意味 着 ， 第 二 组 代码 的 缩 进 方式 与 其 实际 的 执行 
方式 是 不 相符 的 。 

为 了 避免 产生 这 样 容易 混 消 的 情况 ， 可 以 使 用 支持 自动 缩 进 的 文本 编辑 器 。 不 过 ， 其 实 只 要 始终 使 
用 代码 块 来 书写 直子 句 和 else 子 句 的 话 ， 就 能 够 避免 这 一 问题 了 ， 所 以 ,在 此 更 加 推荐 使 用 这 种 通用 性 
更 高 的 解决 方式 。 


Veh 0 5 易 使 人 误解 的 缩 进 
ei 


































































































IE (== 0) { 
ole = ael j==00)s 
} else { 


print ("i==0 and j!=0"); 
) 
在 本 书 中 ， 即 使 让 子 句 及 else 子 句 的 内 容 只 占 1 行 ， 也 始终 会 使 用 代码 块 的 形式 。 根 据 这 一 原则 ， 
如 果 要 让 else 子 句 对 应 外 侧 的 让 子 句 ， 就 需要 像 下 面 这 样 书写 。 习 惯 了 这 种 方式 的 话 ， 通 过 大 括号 就 能 
够 很 清楚 地 理解 语句 的 结构 。 
4 1 


EL 
了 EU 于 
































} else { 
Tobe te (t= ere TeOVs 








不 过 这 一 方式 也 存在 一 种 例外 。 试 考虑 在 else 子 句 中 书写 if-else 语句 的 情况 。 如 果 还 是 按照 始终 使 
用 代码 块 的 原则 来 书写 代码 的 话 ， 就 会 变 成 下 面 这 样 的 情况 。 
// 在 使 用 了 代码 块 之 后 代码 变 得 有 些 宛 长 的 例子 














if (i == 0) { 
ee Oe 

} else 
RE 


print ("i==1"); 

b 

这 样 的 写法 虽然 也 没有 什么 错误 ,不 过 根据 书写 习惯 ， 在 else 子 句 中 书写 if-else 语句 时 最 好 按照 以 
下 形式 。 

// 根据 习惯 ， 上 一 段 代 码 通 常 应 该 像 下 面 这 样 来 书写 























(0) 
Tohonode (t=) 
else (= 
re me (mT) 











同时 ， 对 于 下 面 这 样 在 else 子 句 中 有 连续 多 个 if-else 语句 的 情况 ， 这 一 习惯 写法 也 是 很 方便 的 。 习 
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惯 之 后 会 发 现 ， 条件 表 达 式 和 执行 语句 的 对 应 关系 非常 清晰 ， 语句 的 可 读 性 大 为 提升 。 








在 下 面 的 代码 中 ， 将 会 对 变量 i 的 值 为 0、 为 1 以 及 为 2 的 几 种 分 支 情况 依次 进行 判断 。 
// 习惯 之 后 非常 易于 阅读 的 代码 写法 ( 不 过 ， 这 时 也 应 该 考虑 是 否 需要 采用 接 下 来 将 要 说 明 的 switch-case 语句 ) 




















if (i == 0) { 
roe 

} else if (i == 1) 
oa (en 

Mensesenee 
rereade (Ese 2 up 

} else { 


BE rt (ee en 


4.13 | switch-case 语句 








switch-case 语句 是 一 种 语法 结构 与 if-else 有 所 不 同 的 条 件 分 支 判 断 语句 。 其 语法 结构 如 下 。 








// switch-case 语句 的 语法 


switch (语句 ) { 
case 表达 式 1: 

















表达 式 。 与 之 相对 应 地 ， 在 Java 的 case 标签 中 ， 则 只 能 使 用 在 编译 时 就 能 够 获得 结果 的 常量 表达 式 。 


日 








根据 习惯 , “case 表达 式 : ”部 分 被 称 为 case 标签 ， 而 “default ”部 分 被 称 为 default 标签 。 从 语法 
规则 的 角度 来 看 ， 它 们 与 if-else 语句 中 子 句 的 功能 不 同 ， 起 到 的 是 跳 转 目标 的 作用 。 在 switch 语句 中 可 
以 书写 多 个 case 标签 ， 而 default 标签 则 只 能 使 用 1 次 。 此 外 ，default 标签 是 可 以 省 略 的 。 
尽管 JavaScript 中 的 switch 语句 在 语法 结构 上 与 Java 的 相同 ,但 它们 在 实际 的 语法 规则 上 却 有 着 一 
些 细 微 的 差异 。 在 JavaScript 中 ，switch 的 括号 内 可 以 写 任 意 类 型 的 表达 式 ，case 标签 中 也 可 以 写 任 意 的 














































































































switch 语句 会 把 其 在 switch 之 后 的 括号 内 的 表达 式 ， 与 case 标签 中 所 写 的 各 个 表达 式 ， 依 次 通过 相 
等 运算 符 (=== ) 进行 比较 。 为 了 避免 用 词 混淆 ， 这 里 将 前 者 称 为 switch 表达 式 ， 而 将 后 者 称 为 case 表 
达 式 。=== 运算 符 是 不 会 进行 数据 类 型 转换 的 相等 运算 符 。switch 语句 首先 对 switch 表达 式 进 行 求 值 ， 
之 后 依次 对 case 表达 式 从 上 往 下 求 值 ， 并 将 其 结果 与 switch 表达 式 的 求 值 结果 进行 等 值 比较 (=== )。 如 


















































值 相等 ， 则 跳 转 至 该 case 标签 处 。 如 果 与 所 有 的 case 表达 式 都 不 等 值 ， 则 跳 转 至 default 标签 处 。 


人 











下 面 的 例子 主要 展示 了 一 些 在 Java 中 不 被 允许 的 类 型 ( 代码 清单 4.1 )。 
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| 代码 清单 4.1 ”switch 语句 的 例子 


人 


switch (s) { // 可 以 在 switch 表达 式 中 使 用 字符 串 值 。 
// 可 以 在 case 表达 式 中 使 用 和 switch 表达 式 类 型 不 同 的 值 。 
// s === 0 的 值 为 假 ， 所 以 将 继续 进行 比较 。 
Case 0d: 

print('not here'); 

break; 


// 可 以 在 case 表达 式 中 使 用 含有 变量 的 表达 式 。 
// s === s.length 的 值 为 假 ， 所 以 将 继续 进行 比较 。 
case 8s.1length: 

Pr noc neren 

break; 


// 可 以 在 case 表达 式 中 使 用 方法 调用 表达 式 。 
// s === (0) .toString() 的 值 为 假 ， 所 以 将 继续 进行 比较 。 
ease (0 EoSstrine IF 

print('not here'); 

break; 


// 还 可 以 在 case 表达 式 中 书写 这 样 的 表达 式 。 
// s === 'f' + 'or + '0' 为 真 所 以 将 执行 以 下 的 代码 。 
GaSe ou Uo: 

print ('here'); 

break:; 


// 如 果 所 有 的 case 表达 式 在 等 值 运算 ( === ) 后 得 到 的 结果 都 为 假 ， 则 执行 以 下 的 代码 。 
Gear 

print ('not here'); 

Breaky 



































} 
乍 一 看 ，case 标签 之 间 的 部 分 是 作为 一 个 整体 来 执行 的 ， 不 过 实际 上 ，case 标签 并 没有 对 代码 按 块 
进行 分 割 的 功能 。 因 此 在 一 个 case 标签 结束 执行 之 后 ， 并 不 会 跳出 switch 语句 。 

在 代码 清单 4.2 的 switch 语句 中 ， 虽 然 第 一 个 case 标签 的 比较 结果 就 为 真 ， 但 之 后 所 有 的 case 标签 
也 都 会 被 执行 。 
| 代码 清单 4.2 ”没有 break 语句 的 switch 语句 ， 将 不 会 在 执行 完 其 中 某 一 段 case 之 后 就 结束 整个 switch 语句 


























var XxX = 0; 
switch (x) { 
Case 0: 

Tepeul oe Nuon 
SASe 

Pen el 
CDE 

[ohn (ae 
default: 

Die (naet a 

break; 


// 代码 清单 4.2 中 switch 语句 的 执行 结 
0 


上 
芝 
default 


由 这 一 结果 可 知 ， 应 该 将 case 标签 与 default 标签 看 作 跳 转 的 目标 地 址 。 也 就 是 应 该 这 样 来 理解 case 
标签 的 作用 : 当 switch 表达 式 与 case 表达 式 的 值 相 一 致 时 ， 就 跳 至 该 case 标签 所 在 位 置 ， 执 行 完 该 段 代 
码 之 后 继续 从 上 往 下 逐次 执行 后 续 语 句 。 
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在 很 多 时 候 ， 上 面 这 样 的 代码 都 无 法 得 到 预 共 
制 跳 出 当前 switch 语句 。 


| 代码 清单 4.3 ”通过 break 语句 跳出 switch 语句 


WA 

sweeney 

came oy 
olentred el on) 
break; 

Care ly 
Pum (on 
break; 

Saney 2 
Pm 
break; 

default: 

Pen aetale 
break; 











， 
// 代码 清单 4.3 的 运行 结果 
0 


的 结果 。 





像 代 码 清单 4.3 这 样 使 用 break 语句 就 可 以 强 




















可 以 说 ， 代 码 清单 4.3 是 一 种 良好 的 switch 语句 使 月 











句 才 是 比较 少见 的 。 











据 情 况 不 同 ， 有 时 比 起 if-else 语句 ，switch 语句 的 可 读 性 会 更 好 ( 这 档 

















在 使 用 





日 模板 。 事实 上 ， 不 使 


如 果 在 if-else 语句 中 有 多 个 连续 的 分 支 判 断 ， 则 可 以 将 代码 改写 为 等 价 的 switch 语句 。 在 两 种 写法 
都 可 以 的 情况 下 ， 有 具体 选择 哪 一 种 只 是 偏好 问题 ， 认 为 哪 一 种 方式 的 可 读 怕 

















] break 语句 的 switch 语 








E 更 好 就 选择 哪 一 种 即 可 。 根 









































如 果 原 来 的 if-else 语句 中 的 表达 式 使 


的 问题 通 


的 是 
常 不 容易 被 发 现 ， 很 容易 成 为 产生 错误 的 根源 。 


| 4.14 | 循环 语句 


























类 型 进行 转换 的 
运算 的 话 ， 就 可 能 会 在 执行 上 有 一 些 细微 的 差别 。 而 这 样 


说 可 能 带 有 一 些 主观 偏好 )。 至少 
switch 语句 时 ， 等 值 比较 表达 式 可 以 被 隐藏 起 来 ， 所 以 与 使 用 了 等 值 比较 的 迁 else 语句 相 比 表达 
上 更 为 简洁 。 需 要 注意 的 是 ，switch 语句 所 隐藏 的 等 值 比较 运算 是 不 会 对 数据 





运算 。 














和 条 件 分 支 语句 一 样 ， 循 环 语句 也 是 基本 的 控制 语句 。 循 环 处 理 语句 的 一 个 不 太 严 密 的 定义 是 ， 只 
要 某 个 条 件 成 立 就 不 断 重复 执行 同样 处 理 的 控制 语句 。 由 于 源 代码 中 同一 代码 块 会 被 反复 执行 ， 所 以 也 














称 为 循环 指令 处 理 。 


在 JavaScript 中 有 以 下 5 种 循环 语句 。for each in 语句 在 ECMAScript 中 并 不 存在 ， 是 JavaScript 独 有 


的 增强 功能 。 





// while 语句 
while ( 条件 表 达 式 ) 
语句 


// do-while 语句 
do 
语句 


while (条 件 表达 式 ) ; 


// for 语句 
for ( 初始 化 表达 式 ; 条 件 表达 式 ; 更 新 表达 式 ) 





图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 








第 4 章 ， 语 句 、 表 达 式 和 运算 符 055 @ 


语句 
// for each in 语句 ( 非 ECMAScript 标准 功能 ) 


for each ( 表达 式 in 对 象 表达 式 ) 
语句 


4.15 | while 语句 


while 语句 是 最 为 基本 的 循环 控制 语句 。while 语句 也 被 称 为 while 循环 。 下 面 是 while 语句 的 语法 规则 。 























// while 语句 的 语法 规则 


while (条 件 表达 式 ) 

语句 

和 if-else 语句 一 样 ， 在 条 件 表达 式 位 置 所 写 的 表达 式 的 值 将 会 被 转换 为 布尔 型 。 一 旦 开始 执行 while 语 
句 ， 就 将 首先 对 条 件 表达 式 求 值 。 如 果 该 值 为 假 ， 则 不 会 执行 循环 部 分 的 语句 并 结束 该 while 语句 。 如 果 条 
件 表达 式 的 值 为 真 ， 则 将 执行 该 语句 。 在 语句 执行 结束 之 后 ,会 再 次 对 条 件 表达 式 求 值 。 如 果 此 时 该 值 仍 然 
为 真 ， 则 再 次 执行 循环 部 分 的 语句 。 在 条 件 表 达 式 的 值 变 为 假 之 前 ， 将 一 直 重 复 执行 循环 部 分 的 语句 。 

和 if-else 语句 一 样 ， 可 以 在 循环 部 分 的 语句 处 使 用 代码 块 ( 代码 清 单 4.4)。 在 本 书 中 ， 原 则 上 会 始 
终 采用 代码 块 的 形式 书写 。 


| 代码 清单 4.4 ”while 语句 和 代码 块 


// 容易 产生 混淆 的 缩 进 方式 。 第 二 个 print 其 实 是 在 while 循环 之 外 的 。 
while (flag) 

ROSE 

print ("not in loop"); // 循环 之 外 的 语句 


// 使 用 代码 块 的 话 就 能 很 容易 地 理 清 语句 结构 
while (flag) { 

rebelad ed ab lroyo 

ET eyo) 






















































































} 


// 即使 语句 只 有 1 行 ， 也 推荐 使 用 代码 块 
while (flag) { 

Teleulad el aba doroyo 
} 












































在 while 语法 结构 中 可 以 使 用 任意 的 语句 。if-else 语句 也 属于 是 语句 ，while 语句 也 属于 语句 。 也 就 
是 说 ， 在 下 面 这 样 的 while 的 循环 中 ， 也 是 可 以 使 用 while 语句 或 者 是 if-else 语句 的 。 

// 内 套 的 while 语句 

while (flag) { 


while (flag2) { 
merelnel a douple loopu 
} 

















} 
// while 语句 中 组 入 if 语句 
whiee (eag) 
A (flee) { 
Beint (nloopv 有 
} 


} 
在 条 件 表达 式 始 终 为 真 的 情况 下 ， 循 环 内 的 语句 将 会 被 无 限 次 重复 执行 。 这 样 的 循环 一 般 称 为 无 限 





图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 





@@ 056 一 一 一 第 2 部 分 “JavaScript 的 语言 基础 


循环 。 意 外 形成 的 无 限 循环 是 一 种 致命 性 的 错误 。 


环 就 是 一 种 错误 。 


子 。 其 实 对 于 这 个 例子 的 功能 ， 用 之 后 将 要 介绍 的 for 循环 会 更 加 直观 ， 在 这 里 仅仅 因 示 例 的 需要 而 使 用 




















在 其 他 的 程序 设计 语言 中 ， 有 时 会 有 意 地 使 用 一 些 无 限 循环 ， 但 在 客户 端 JavaScript 开发 中 ， 无 限 循 








要 避免 出 现 无 限 循 环 ， 从 while 循环 中 跳出 ， 可 以 执行 以 下 操作 。 
@ 保证 在 循环 过 程 中 条 件 表达 式 的 值 将 变 为 假 

@ 在 循环 内 部 使 用 break 语句 

@ 在 循环 内 部 使 用 return 语句 

@ 在 循环 内 部 抛 出 异常 


break 语句 、return 语句 以 及 异常 的 概念 都 将 在 之 后 的 有 关 跳 转 的 小 节 中 进行 说 明 。 
对 于 在 循环 过 程 中 条 件 表达 式 的 值 变 为 假 的 情况 ， 在 此 考虑 一 个 进行 10 次 循环 的 while 循环 的 例 
































了 while 语句 。 


// 循环 10 次 的 while 语句 
Var T= 0 
WE 

Pr (Ce 

i+t++; 


// 循环 10 次 的 while 语句 ( 另 一 种 实现 方式 ) 


ven dolmae = Er ue 


Wa ry 
while (doing) { 
oeobele aly) 
i+t++; 
if (i == 10) { 
doing = false; 
} 
} 


第 二 种 方式 中 通过 改变 标记 变量 来 跳出 while 循环 的 做 法 ， 并 不 符合 编程 习惯 。 


nr 








4.16 | do_-while 语句 








do-while 语句 是 男 一 种 循环 语句 ， 其 语法 结构 如 下 所 示 。 








// do-while 语句 的 语法 结构 


do { 
语句 
} while (条 件 表达 式 ) ; 

















do-while 语句 的 条 件 表达 式 ， 和 循环 内 部 的 语句 、while 语句 是 相同 的 ， 所 以 在 此 不 再 重复 说 明 。 同 

















样 地 ， 本 书 原则 上 始终 会 对 循环 部 分 的 语句 使 用 代码 块 。 








// do-while 语句 的 例子 
do { 

Pen (un loop 
} while (flag); 


while 语句 与 do-while 语句 的 差别 仅仅 在 于 ， 是 首先 对 条 件 表达 式 进行 求 值 ， 还 是 首先 执行 语句 。 对 


\ 

















于 while 语句 ， 先 对 条 件 表达 式 进 行 求 值 ， 如 果 表 达 式 的 值 为 真 ， 才 执行 循环 部 分 的 语句 。 之 后 将 不 断 
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循环 直至 条 件 表达 式 的 值 变 为 假 。 
对 于 do-while 语句 ， 则 首先 执行 循环 部 分 的 语句 ， 之 后 才 对 条 件 表达 式 进 行 求 值 。 之 后 同样 会 不 断 
循环 直至 条 件 表达 式 的 值 变 为 假 。 

一 旦 循环 开始 ， 条 件 表达 式 的 求 值 与 循环 内 语句 的 执行 就 将 会 交 兰 进行 。 因 此 如 果 非 要 界定 while 
语句 和 do-while 语句 的 差别 ， 那 就 只 有 是 否 会 进行 最 初 的 那 一 次 条 件 表达 式 的 求 值 而 已 。 

在 实际 编程 中 ，do-while 语句 的 使 用 并 不 多 ， 主 要 使 用 while 语句 。 其 实 ，do-while 语句 的 使 用 模式 
只 有 以 下 两 种 。 只 要 稍 加 调整 ， 这 两 种 情况 也 都 能 通过 while 语句 来 实现 。 

@ 如 果 循环 内 的 语句 不 执行 一 次 ,条件 表 达 式 的 求 值 就 没有 意义 的 情况 

@ 希望 确保 循环 内 的 语句 至 少 被 执行 一 次 的 情况 


下 面 是 一 个 使 用 do-while 语句 的 具体 示例 。 这 是 一 个 从 右 往 左 逐 一 显示 参数 所 提供 数值 的 字符 的 函 
数 。 如 果 输 入 的 内 容 是 123， 则 会 依次 输出 3、2、1。 如 果 不 使 用 do-while 语句 而 是 使 用 while 语句 来 改 
写 这 一 函数 ， 当 输入 0 时 输出 就 会 为 空 。 而 使 用 了 do-while 之 后 ， 如 果 传 递 的 参数 是 0， 则 会 输出 0。 

// 使 用 ae-while 语句 的 例子 

function printNumberFromRight (n) { 


G 
Peont(n 10 






































































































































mn = (nn 0 
// 如 果 使 用 n /= 10; 的 话 结果 将 会 是 一 个 小 数 。~ ~ 运算 是 一 种 可 以 把 小 数 变 为 整数 的 巧妙 方法 。 
} while (n > 0); 
} 





| 4.17 for 语句 





for 语句 是 男 一 种 循环 语句 。for 语句 一 般 称 为 for 循环 ， 其 语法 结构 如 下 所 示 ， 其 中 的 三 个 表达 式 都 
是 可 以 省 略 的 。 


// foz 语句 的 语法 


人 ; 条 件 表达 式 ; 更新 表达 式 ) 
刘 口 
和 其 他 几 种 控制 语句 一 样 ，for 语句 中 的 循环 部 分 也 推荐 使 用 代码 块 。 
在 初始 化 表达 式 中 ， 通 常会 写 诸如 0 这 样 的 对 变量 进行 初始 化 的 表达 式 。 通 常会 把 在 初始 化 表达 
式 中 进行 初始 化 的 变量 称 为 循环 变量 。 一 个 典型 的 for 语句 ， 将 会 在 初始 化 表达 式 中 对 循环 变量 进行 初始 
化 ， 在 更 新 表达 式 中 对 循环 变量 进行 更 新 ， 在 条 件 表达 式 中 检查 循环 变量 的 值 。 之 后 会 对 for 语句 的 习惯 
用 法 作 进 一 步 说 明 。 

初始 化 表达 式 只 会 在 for 语句 执行 之 初 被 求 值 1 次 。 如 果 省 略 了 初始 化 表达 式 ， 也 只 不 过 是 在 for 语 
句 执行 时 不 进行 这 次 求 值 而 已 。 

在 初始 化 表达 式 中 还 可 以 书写 循环 变量 的 声明 表达 式 。 需 要 注意 的 是 ， 这 一 变量 的 作用 域 和 函数 作 
用 域 是 相同 的 ， 而 非 仅 限 于 语句 之 内 。 更 详细 的 内 容 请 参见 6.4 节 。 
// 在 初始 化 表达 式 中 对 循环 变量 i 0 


or (var J S00 de ITO. ie 
Dinne a 


0 这 时 循环 内 是 可 以 引用 变量 i 的 ( 处 于 作用 域 之 内 )。 

条 件 表达 式 的 作用 和 while 语句 以 及 do-while 语句 的 基本 相同 。 如 果 返 回 值 为 真 ， 则 继续 循环 ; 如 果 
为 假 ， 则 跳出 循环 。 对 条 件 表达 式 进 行 求 值 的 时 机 和 while 语句 是 相同 的 ， 也 就 是 说 ，for 语句 会 在 执行 
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之 初 就 对 条 件 表达 式 进 行 求 值 ， 如 果 条 件 表达 式 的 值 为 真 ， 则 执行 循环 内 的 语句 ， 在 语句 执行 之 后 再 次 
对 条 件 表 达 式 进行 求 值 。 和 while 语句 不 同 的 是 ，for 语句 会 在 第 2 次 对 条 件 表达 式 进行 求 值 之 前 ， 先 对 
更 新 表达 式 进 行 求 值 。 此 外 ， 与 while 语句 和 do-while 语句 不 同 ，for 语句 的 条 件 表达 式 是 可 以 省 略 的 。 
如 果 省 略 了 该 部 分 ， 则 会 认为 条 件 表达 式 的 值 永 真 。 

在 更 新 表达 式 的 位 置 可 以 书写 任意 的 表达 式 。 大 多 数 情况 下 ， 会 在 此 更 新 循环 变量 的 值 。 更 新 表达 
式 会 在 for 循环 内 的 语句 执行 之 后 执行 ， 之 后 条 件 表达 式 将 被 再 次 求 值 。 之 后 将 会 讲 到 ， 即 使 在 for 语句 
中 使 用 了 continue 语句 ， 也 仍然 会 对 更 新 表达 式 进 行 求 值 。 更 新 表达 式 也 是 可 以 被 省 略 的 。 如 果 省 略 了 
该 部 分 ， 就 不 再 执行 这 一 步骤 。 


国 for 语句 的 习惯 用 法 | 



























































































































































for 语句 的 主要 用 途 是 ， 在 某 个 值 的 范围 内 从 头 到 尾 执行 一 遍 处 理 。 下 面 是 一 个 最 为 典型 的 具体 
示例 。 
// for 语句 为 人 所 熟知 的 习惯 用 法 
Fo (a 0 
ostrele (a 








这 段 代码 是 for 循环 的 一 个 很 有 名 的 例子 ， 其 执行 结果 是 输出 从 0 至 9 的 10 个 数字 。 把 代码 中 的 10 
替换 成 其 他 任意 整数 n 的 话 ， 就 将 会 循环 n 次 。 之 前 已 经 提 到 过 ， 使 用 while 循环 也 可 以 实现 同样 的 功 
能 。 不 过 在 习惯 了 for 语句 的 结构 之 后 ， 会 感受 到 for 语句 有 着 更 高 的 可 读 性 。 

有 经 验 的 程序 员 由 于 见 惯 了 这 样 的 惯用 形式 ， 所 以 只 要 粗略 读 一 下 代码 就 马上 能 判断 出 这 段 代 码 将 
会 循环 10 次 。 也 就 是 说 ， 在 从 0 开始 直至 小 于 10 的 范围 内 ， 循 环 将 会 被 执行 10 次 。 不 过 ， 对 于 经 验 不 
足 的 程序 员 来 说 ， 可 能 会 觉得 这 样 的 规则 有 些 别 扭 。 

对 于 习惯 于 通常 的 计数 方式 的 人 来 说 ， 可 能 会 凭 直觉 认为 要 进行 10 次 循环 的 话 应 该 是 从 1 开始 至 
10 结束 ， 于 是 将 会 写 出 下 面 这 样 的 for 循环 。 

// 循环 变量 从 1 开始 并 且 循环 了 10 次 。 如 果 没 有 特别 的 理由 ， 请 不 要 这 样 书写 。 


Eo a ol 
Pr (Ce 





































































































如 果 是 需要 变量 i 的 取 值 是 从 1 至 10， 这 样 的 代码 是 没有 问题 的 。 但 是 ， 如 果 是 需要 代码 循环 10 次 
的 情况 ， 还 是 请 使 用 习惯 用 法 。 虽 然 有 读者 可 能 会 认为 这 两 种 方式 都 将 循环 10 次 ， 选 择 哪 种 都 没 问题 ， 
不 过 因为 可 能 会 让 其 他 人 产生 误解 ， 所 以 还 是 请 使 用 习惯 用 法 。 程 序 设 计 语言 不 仅仅 是 开发 者 向 计算 机 
传递 意图 的 语言 ， 也 是 为 了 让 程序 的 阅读 者 能 够 理解 的 语言 。 因 此 ， 有 必要 在 此 选择 使 用 惯用 形式 ( 或 
者 说 是 一 种 固定 格式 )。 
初始 化 表达 式 和 更 新 表达 式 还 可 以 像 下 面 这 样 ， 通 过 逗号 来 分 隔 多 个 并 列 的 表达 式 。 
// 多 个 外 环 变量 的 例子 


Sa 0 0 0 ee 0 


省 略 
} 






































































































































| 4.18 for in 语句 














for in 语句 是 用 于 枚 举 对 象 属 性 名 的 循环 语句 ， 其 语法 结构 如 下 。 


| // for in 语句 的 语法 结构 
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for ( 变量 in 对 象 表达 式 ) 
语句 

in 的 左 侧 是 在 语句 中 供 赋值 的 表达 式 ， 能 够 在 循环 时 对 其 进行 操作 。 从 语法 上 来 说 是 左 值 。 所 谓 左 
值 就 是 写 在 赋值 表达 式 左 侧 的 值 ， 只 要 简单 地 理解 为 需要 在 此 写 的 是 一 个 变量 名 就 足够 了 。 和 for 语句 一 
样 ， 可 以 在 for in 语句 内 进行 变量 声明 ( 同样 地 ， 其 作用 域 也 不 是 仅仅 在 for in 语句 之 内 )。 今 后， 也 将 
把 该 变量 称 为 循环 变量 。 

in 的 右 侧 是 Object 类 型 的 表达 式 。 之 前 提 到 过 ， 由 于 在 JavaScript 中 会 进行 隐 式 的 数据 类 型 转换 ， 
而 任何 类 型 的 值 都 可 以 被 转换 为 Object 类 型 ， 所 以 事实 上 ， 这 里 可 以 书写 任意 类 型 的 值 。 因 此 ， 无 论 
是 数值 还 是 布尔 值 ， 都 不 会 引起 错误 。 但 是 那样 做 并 没有 什么 实际 意义 ， 所 以 最 终 还 是 应 当 在 此 书写 
Object 类 型 的 表达 式 。 关 于 for in 语句 具体 的 执行 方式 ， 将 会 在 有 关 对 象 的 那 一 节 中 再 进行 说 明 。 

在 对 象 表达 式 处 所 写 的 对 象 的 属性 名 的 字符 串 ， 将 会 被 依次 赋值 给 循环 变量 。 通 过 具体 的 例子 会 比 
文字 说 明 更 为 容易 理解 ， 请 参见 代码 清单 4.5。 
‖ 代码 清单 4.5 ” 枚 举 对 象 的 属性 名 

区 


For arc en os 
een ld 
} 




























































































// 代码 清单 4.5 的 运行 结 
XxX 


只 
加 














对 象 obj 含有 三 个 属性 。 通 过 for in 语句 可 以 把 其 属性 名 为 x、y、z 的 字符 串 赋 值 给 循环 变量 k。 通 
常会 把 对 象 看 作 一 个 关联 数组 ， 而 把 循环 变量 命名 为 或 是 key， 使 人 联想 到 这 是 关联 数组 的 键 。 有 时 
也 把 循环 变量 命名 为 p 或 n(ame)， 使 人 联想 到 这 些 是 属性 名 称 。 

如 果 要 显示 属性 值 的 话 ， 通 常会 像 代 码 清单 4.6 这 样 ， 在 for in 语句 中 使 用 中 括号 运算 。 
上 代码 清单 46 枚 举 对 象 的 属性 值 

Ee Oo = eol ee ad 


EeE (ME 下 Ti 0) 1 
Bernt (ona 
) 

















// 代码 清单 4. 6 的 运行 结果 
1 


| 
各 





国 4.18.1 数列 与 forin 语句 | 
由 于 数列 也 是 一 种 对 象 ， 目 其 下 标 数 值 相当 于 一 种 属性 名 ， 所 以 也 可 以 像 下 面 这 样 通过 for in 语句 
来 实现 枚 举 。 不 过 ， 并 不 推荐 采用 这 种 方式 对 数列 的 元 素 进行 枚 举 ， 之 后 会 再 做 说 明 。 
上 代码 清单 47 枚 举 数列 的 元 素 ( 不 推荐 这 么 做 ) 
Var ate ss D7 Le Sl] 


ter (es Ti 
BeinEl(n ar 
] 











// 代码 清单 4 . 7 的 运行 结果 
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0=>7 
1=>1 


蕊 三 > 





于 4.18.2 在 使 用 for in 语句 时 需要 注意 的 地 方 | 
关于 for in 语句 的 使 用 ， 这 里 有 3 点 需要 注意 的 。 
图 枚 举 属性 的 顺序 
首先 是 枚 举 属 性 的 顺序 。 虽 然 在 代码 清单 4.5 中 ， 是 以 对 象 字面 量 书写 的 顺序 来 进行 枚 举 的 ， 不 过 
实际 上 并 非 一 定 会 这 样 。 毕 竟 属 性 之 间 本 身 就 不 存在 顺序 关系 ， 所 以 认为 它们 应 该 以 某 种 顺序 排列 的 想 
法 ， 从 根本 上 就 是 不 正确 的 。 
另 一 方面 ， 数 列 则 是 一 种 有 顺序 关系 的 数据 类 型 。 代 码 清单 4.7 的 输出 顺序 就 和 预想 的 情况 相同 。 
虽然 可 能 绝 大 多 数 时 候 都 能 够 像 这 样 获得 预期 的 输出 顺序 ， 不 过 for in 语句 本 身 并 不 保证 会 按照 某 一 顺 
序 枚 举 ， 所 以 仍然 不 应 该 对 此 过 分 依赖 。 
国 无 法 被 枚 举 的 属性 
第 二 个 要 注意 的 是 ， 有 一 些 属性 是 不 能 够 被 for in 语句 枚 举 的 。 例 如 ， 虽 然 数 列 对 象 中 含有 length 这 
一 属性 ， 但 在 代码 清单 4.7 中 for in 语句 并 没有 枚 举 它 。 这 是 因为 length 是 一 种 无 法 被 for in 枚 举 的 属性 。 
更 详细 的 信息 请 参见 5.10 节 。 
图 由 原型 继承 而 来 的 属性 
第 三 个 要 注意 的 是 ，for in 语句 还 可 以 枚 举 由 原型 继承 而 来 的 属性 。 详 细 内 容 请 参见 5.8.3 节 以 及 
5.16.。 










































































] 4.19 | for each in 语句 








for each in 语句 在 ECMAScript 中 并 不 存在 ， 是 JavaScript 自 有 的 增强 功能 。for each in 语句 的 语法 结 
构 如 下 所 示 。 由 于 变量 和 对 象 表 达 式 的 部 分 和 for in 语句 相同 ， 所 以 在 此 不 再 蒙 述 。 


// for each in 语句 的 语法 








for each ( 变量 in 对 象 表达 式 ) 
语句 
和 for in 不 同 ，for each in 语句 并 不 是 把 属性 名 赋值 给 变量 ， 而 是 将 属性 值 赋值 给 它 。 通 过 一 个 具体 
的 例子 就 能 很 容易 地 理解 了 ， 请 将 下 面 的 例子 和 代码 清单 4.5 做 比较 。 


a oD (0 
Eon each (ver ES 
Pelnel RE 









































/ 运行 结 


7 
1 
3 
有 








for each in 语句 的 基本 概念 和 for in 语句 是 相同 的 ， 关 于 for in 语句 的 那些 注意 事项 对 于 for each in 语 
句 也 一 并 通用 。 
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| 4.20 | break 语句 

















在 循环 中 有 时 会 需要 中 途 跳出 ， 为 此 可 以 使 用 break 语句 。break 语句 不 仅 可 以 用 于 跳出 switch-case 
语句 的 循环 ， 也 能 够 用 于 其 他 类 型 的 循环 语句 。 下 面 是 不 通过 break 语句 跳出 while 循环 的 例子 和 通过 
break 语句 跳出 循环 的 例子 ( 代码 清单 4.8 )。 

有 代码 清单 48 break 语 名 的 例子 
// 不 通过 break 语句 跳出 循环 的 代码 示例 


varitlaghloop Eeues 
while (flag loop) { 


if ( 跳出 循环 的 条 件 ) { 
tlaglloop falsey 
































} 
// 通过 break 语句 跳出 循环 的 代码 示例 


while (true) { 


if ( 跳出 循环 的 条 件 ) { 


break; 


} 





} 

严格 来 说 ,使 用 了 break 语句 的 代码 和 第 一 段 代 码 并 不 是 等 价 的 。 这 是 因为 使 用 了 break 语句 的 情况 
下 ， 不 会 再 一 次 对 条 件 表达 式 进行 求 值 。 如 果 是 for 语句 的 情况 ， 则 不 会 对 更 新 表达 式 求 值 。 不 过 这 样 的 
差别 通常 并 不 会 引起 问题 。 


4.21 | continue 语句 


在 循环 中 使 用 continue 语句 的 话 ， 就 会 跳 过 在 此 之 后 本 次 循环 内 尚未 执行 的 语句 ， 而 返回 至 循环 的 
条 件 表达 式 进 行 求 值 。 如 果 是 for 语句 的 情况 ， 则 是 返回 至 更 新 表达 式 处 求 值 后 再 对 条 件 表达 式 进行 求 
值 。 更 为 直接 点 说 ， 就 是 continue 语句 将 会 跳 转 至 循环 的 开头 。 

下 面 的 代码 是 一 个 仅 当 循环 变量 为 偶数 时 才 进 行 处 理 的 for 循环 的 例子 。 

// 仅 当 循环 变量 为 偶数 时 才 进行 处 理 的 for 循环 


for (rar WM = 0 ue TO dr) 
























































} 

这 段 代码 可 以 改写 为 在 循环 的 头 部 对 循环 变量 是 否 为 偶数 进行 判断 ， 并 通过 continue 来 进行 跳 转 的 
形式 。 使 用 了 continue 语句 之 后 ， 实 际 的 处 理 部 分 可 以 减少 一 层 。 通 常 ， 减 少 缩 进 的 层 数 可 以 提高 代码 
的 可 读 性 。 

// 仅 当 循环 变量 为 偶数 时 才 进 行 处 理 的 for 循环 ( 采用 了 continue 的 版 本 ) 

For (rar dL = OL TO d+) 


sya MCG Ce of 
continue; 











处 理 
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| 4.22 | 通过 标签 跳 转 


在 垦 套 循环 的 内 层 使 用 break 语句 的 话 ， 仅 仅 会 跳出 内 层 的 循环 。 请 看 下 面 的 例子 。 


// 在 柑 套 循环 中 使 用 break 语句 的 代码 示例 。 仅 仅 会 跳出 内 层 循环 。 
while ( 条件 表达 式 ) { 
prane (oem oo 
while ( 条件 表达 式 ) { 
re (nen 
if ( 跳出 循环 的 条 件 ) { 


break; 
































} 
} 


那么 该 如 何 才能 同时 跳出 外 层 循环 呢 ? 从 理论 上 来 说 ， 可 以 像 下 面 这 样 通过 旗 标 变量 来 实现 。 不 过 ， 
这 样 的 代码 不 容易 改动 ， 所 以 并 不 推荐 。 
// 同时 跳出 说 套 内 外 层 的 循环 ( 采用 了 旗 标 变量 的 版 本 ， 并 不 推荐 ) 


vartlacmleoop Eup 
while (flag loop) { 
prine (ouerm oop 
while (条 件 表达 式 ) { 
Drm nme oo 
if ( 跳出 循环 的 条 件 ) { 
lacieop foalses // 这 样 就 能 同时 跳出 外 层 循环 


break; 

































































】 
flag loop 变量 变 为 了 false 之 后 ， 将 会 跳 过 这 一 部 分 代码 





还 可 以 使 用 标签 实现 同时 跳出 藤 套 的 循环 。 标 签 的 语法 规则 如 下 。 





// 标签 的 语法 规则 











标签 字符 串 : 语句 

在 标签 字符 串 处 可 以 使 用 任意 的 标识 符 。 标 签 所 指向 的 语句 可 以 是 任意 类 型 的 ， 并 不 一 定 必须 是 循 
环 语句 ， 不 过 在 大 多 数 时 候 ， 标 签 会 指向 循环 语句 。 

可 以 像 下 面 的 代码 这 样 ， 使 用 标签 来 实现 同时 跳出 内 外 层 肯 套 的 循环 。 

// 使 用 标签 来 同时 跳出 组 套 的 循环 


Suceraloope 
while (true) { 
Prunt (uouter loop 
while (true) { 
Drm (nm lp 
breareouGer lo 





















































} 
} 


这 段 代码 可 以 这 样 解读 : 外 层 循环 被 标 以 outer loop 的 标签 ( 此 前 提 到 过 ,请 再 回想 一 下 ，while 循 
环 以 及 相应 的 代码 块 共 同 组 成 了 一 句 语句 )。 通 过 break outer loop 就 可 以 跳出 标 有 该 标签 的 语句 。 这 样 
就 能 一 下 子 从 购 套 的 循环 中 跳出 了 。 

对 continue 语句 也 可 以 使 用 标签 。 这 时 ， 将 会 跳 转 至 标 有 相应 标签 的 循环 语句 的 条 件 表达 式 处 进行 
求 值 (对 于 for 语句 来 说 则 是 相应 的 更 新 表达 式 与 条 件 表达 式 )。 
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4.23 | return 语句 
return 语句 的 语法 如 下 所 示 ， 其 中 表达 式 是 可 以 省 略 的 。 
// return 语句 的 语法 结构 
return 表达 式 7 
retum 语句 会 中 断 函 数 的 处 理 ， 并 将 指定 的 表达 式 的 值 作为 函数 的 返回 值 返 回 。 如 果 没 有 指定 表达 





4.24 


异常 


， 函 数 的 返回 值 将 会 是 undefined 值 。 








可 以 通过 throw 语句 来 抛 出 异常 对 象 (异常 值 )。 throw 语句 的 语法 规则 如 下 所 示 。 





// throw 语句 的 语法 规则 


throw 表达 式 ; 









































在 捕捉 异常 的 地 方 ， 





























其 中 表达 式 处 可 以 使 用 任意 类 型 的 表达 式 ， 这 与 只 能 够 使 用 异常 类 型 的 Java 是 不 同 的 。 
则 需要 使 用 try-catch-finally 的 结构 。 其 中 catch 子 句 和 finally 子 句 是 不 能 同时 
省 略 。 如 果 只 省 略 其 中 一 个 则 没有 问题 。 





} finally { 
语句 





{ // 该 变量 是 一 个 引用 了 所 捕捉 到 的 异常 对 象 的 


// try-catch-finally 结构 的 语法 




















弓 部 变量 

















如 果 在 try 子 句 中 ( 以 及 在 try 子 句 中 调用 的 函数 内 ) 发 生 蜡 常 的 话 ， 
catch 子 句 的 部 分 。 执 行 catch 子 句 被 称 为 捕捉 到 了 异常 。 在 try 语句 之 外 ， 








句 ， 都 是 无 法 

















捕捉 异常 的 。 这 时 函数 会 中 断 并 返回 至 调用 该 函数 之 处 。 
throw 语句 和 retum 语句 在 中 断 函 数 的 执行 上 是 相似 的 ， 不 过 throw 语句 并 没有 返回 值 。 而 且 ， 如 果 








没 能 在 调用 了 该 函数 的 函数 内 的 catch 子 句 中 捕捉 异常 的 话 ， 还 会 进一步 返 


种 行为 称 为 异常 的 传递 )。 
如 果 最 终 都 没 能 成 功 捕捉 异常 ， 


finally 子 句 必定 会 在 跳出 try 语句 之 时 被 执行 。 即 使 没有 产生 异常 ， 





整个 程序 的 执行 就 将 被 中 断 。 








运行 就 会 中 断 ， 














开始 执行 


或 者 没有 catch 子 句 的 try 语 














回 到 更 上 








层 的 调 ) 








j 函 数 (这 





finally 子 句 也 会 被 执行 。 也 就 是 


说 ， 如 果 没 有 产生 异常 的 话 ， 在 执行 完 try 子 句 之 后 会 继续 执行 fnally 子 句 的 代码 ; 如 果 产 生 了 异常 ， 则 
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会 在 执行 finally 子 句 之 前 首先 执行 catch 子 句 。 对 于 没有 catch 子 句 的 try 语句 来 说 ， 异 常 将 会 被 直接 传 
递 至 上 一 层 ， 但 finally 子 句 仍然 会 被 执行 。 

异常 可 以 通过 throw 语句 显 式 地 抛 出 ， 也 可 能 在 特定 的 运算 中 产生 。 代 码 清单 4.9 中 是 一 段 仅 仅 显 示 
了 执行 顺序 而 没有 其 他 实际 意义 的 代码 。 





























有 代码 清单 4.9 try 语句 的 执行 示例 


try { 
IE 
ml // 在 此 处 强制 产生 一 个 TypeError 异常 
print ('not here'); // 这 条 语句 不 会 被 执行 

Peacenece // 对 象 e 是 TypeError 对 象 的 一 个 引用 
En 2 

DE a 
Toe (th ee 





// 代码 清单 4.9 的 运行 结果 
1 


2 
这 


JavaScript 和 Java 在 try 语句 上 最 大 的 区 别 是 异常 类 型 的 不 同 。 在 Java 中 可 以 对 异常 进行 类 型 分 类 ， 
选择 多 个 catch 子 句 中 的 某 一 个 来 捕捉 异常 。 但 是 在 JavaScript 中 ，catch 子 句 不 能 根据 异常 的 类 型 不 同 而 
决定 是 否 捕 提 该 异常 。 

毕竟 ， 在 JavaScript 中 一 个 try 语句 只 能 使 用 一 个 catch 子 句 ， 因 此 这 个 catch 子 句 可 以 捕捉 任意 类 型 
的 异常 。 要 把 异常 传递 至 上 一 层 ( 函数 的 调用 方 )， 就 不 能 使 用 catch 子 句 ， 或 者 需要 在 catch 子 句 内 重 
新 抛 出 异常 对 象 。 


| 4.25 | 其 他 


with 语句 的 语法 结构 如 下 所 示 。 
// with 语句 的 语法 结构 
with (表达 式 ) 

语句 
with 语句 用 于 临时 改变 名 称 ( 变量 名 或 是 函数 名 ) 的 查找 范围 。with 语句 中 使 用 的 表达 式 是 Object 
类 型 的 。 如 果 使 用 了 其 他 类 型 的 值 ， 则 会 被 转换 为 Object 类 型 。 在 with 语句 内 对 变量 名 进行 查找 时 ， 将 
会 从 所 指定 对 象 的 属性 开始 寻找 。 

下 面 是 一 个 具体 的 例子 。 

// with 语句 的 例子 


































































































js Var // 全 局 变量 
TS ver ob (en 


es wealan (Gagly 4 
print (x); // 如 果 要 查找 变量 x， 则 会 在 查找 全 局 变量 x 之 前 先 查找 到 obj .x 





然而 ， 在 ECMAScript 第 5 版 的 strict 模式 中 是 禁止 使 用 with 语句 的 。 因 此 本 书 也 将 遵循 这 一 方针 ， 
不 使 用 with 语句 。 
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debugger 语句 是 在 ECMAScript 第 5 版 中 出 现 的 语句 ， 顾 名 思 义 ， 它 用 于 调试 。 其 具体 作用 为 ， 调 


试 过 程 将 会 在 含有 debugger 语句 的 代码 行 


4.26 | 注释 





靳 。 








主 释 分 为 以 下 两 种 类 型 。 




















// 单行 注释 
/* 注释 */ 











4.27 


表达 式 





要 对 表达 式 ( expression ) 有 一 个 直观 的 理解 ， 可 以 从 计算 表达 式 人 手 。 例 如 ，1+1 在 数学 中 是 一 种 
昌 数 字 1 和 表示 加 法 运算 的 + 运算 符 组 成 的 。 作 为 运算 


表达 式 ， 在 JavaScript 
对 象 的 数字 被 称 为 操作 数 。 运 算 簿 








由 于 程序 设计 语言 中 可 以 进行 运算 的 对 象 不 仅仅 有 数值 类 型 ， 
时 然 日 语 和 英语 在 形式 上 并 不 对 会， 但 本 





operand。 














在 JavaScript 的 语言 标准 中 有 着 明确 的 定义 。 每 
































”4.28 | 运算 符 


P 也 是 一 种 表达 式 。1+1 是 日 
F 和 操作 数 在 英语 























中 分 别称 为 operator 和 operand。 


所 以 通常 会 将 操作 数 直 接 称 为 


中 还 是 会 使 用 运算 符 和 operand 这 样 的 术语 。 
通过 这 些 术 语 ， 就 能 够 直接 说 明 表达 式 的 含义 了 ， 即 由 运算 符 和 操作 数 连 接 而 成 的 式 子 。 运 算 符 
一 个 运算 符 的 含义 与 功能 都 将 会 在 各 小 节 中 进行 说 明 。 





















































































































































表 4.5 对 JavaScript 中 的 运算 符 进 行 了 总 结 。 而 关于 优先 级 的 问题 则 将 在 之 后 再 进行 详细 说 明 。 

上 到 4.5 Javascript 的 运算 符 ( 按 优先 级 顺序 排列 ) 

[0] New 

() 

十 十 —— 

! ~ +( 单 目 )| -( 单 目 )| typeof void delete 

9% 是 / 

+( 双 目 )| =-( 双 目 ) 

<< >> eb 

ee > 4 

三 三 I = 

& 

| 

&& 

| 

?:( 三 目 ) 

= 十 = 一 = *= /= %= <<= >>= >>>= &= “= |= 
对 于 每 一 个 运算 符 ， 其 操作 数 的 数量 与 位 置 ， 或 者 可 以 使 用 哪些 类 型 的 操作 数 等 都 是 有 规定 的 。 例 

















如 加 法 运算 符 +， 其 操作 数 的 数量 是 2。 有 两 个 操作 数 的 运算 符 被 称 为 双 目 运算 符 ， 需 要 在 运算 符 的 前 后 





人 这 里 是 一 处 与 日 文 译 法 有 关 的 说 明 。 对 于 中 文 来 说 则 不 存在 这 一 问题 ， 故 中 文 版 将 仍然 使 用 “操作 数 ” 这 一 术语 。 
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分 别 书写 一 个 操作 数 。 大 部 分 运算 符 都 是 双 目 运算 符 ， 三 目 运算 符 有 1 个 ， 其 余 的 都 是 单 目 运算 符 。 
目 运算 符 有 3 个 操作 数 ， 而 单 目 运算 符 则 只 有 1 个 操作 数 。 单 目 运算 符 又 可 以 根据 运算 符 与 操作 数 的 前 
后 位 置 关 系 ， 分 为 前 置 运算 符 与 后 置 运算 符 。 前 置 运算 符 是 以 “运算 符 操作 数 ” 的 顺序 书写 的 ， 而 后 置 
运算 符 则 是 按照 “操作 数 运算 符 ” 的 顺序 。 

对 于 某 一 特定 的 运算 符 来 说 ， 这 些 规则 都 是 固定 不 变 的 。 在 单 目 运算 符 中 ， 有 一 些 既 可 以 作为 前 置 
运算 符 也 可 以 作为 后 置 运算 符 (例如 ++ 运算 符 等 )。 这 里 并 不 是 说 这 些 运 算 符 把 操作 数 写 在 前 面 或 是 后 
面 都 没有 关系 ， 而 是 说 这 些 运 算 符 在 前 置 与 后 置 使 用 的 情况 下 都 有 其 特定 含义 ， 所 以 请 将 其 理解 为 ， 不 
同 的 运算 功能 恰巧 采用 了 相同 的 符号 表示 。 


| 4.29 | 表达 式 求 值 


根据 习惯 ， 对 于 语句 来 说 ， 采 用 的 是 执行 (execute ) 这 个 词 ， 而 对 于 表达 式 来 说 ， 则 会 采用 求 值 
(evaluate ) 这 个 词 。 表 达 式 求 值 的 基本 过 程 是 先 对 操作 数 (或 所 对 应 的 表达 式 ) 求 值 ， 之 后 再 应 用 表达 
式 中 的 运算 符 。 不 过 有 一 部 分 运算 符 例 外 ( 逻辑 运算 符 上 、 人 逻辑 运算 符 &&&， 以 及 三 目 运 算 符 )， 它 们 会 
在 最 后 的 阶段 才 对 操作 数 求 值 ， 其 至 有 时 不 会 对 操作 数 进 行 求 值 。 具 体 情况 需要 具体 分 析 。 

对 于 双 目 运算 符 的 情况 ， 对 左 操 作 数 的 求 值 将 先 于 右 操作 数 。 对 于 三 目 运算 符 的 情况 ， 首 先 会 对 最 
左 侧 的 操作 数 求 值 ， 之 后 根据 具体 情况 只 会 对 剩余 两 个 操作 数 中 的 一 个 进行 求 值 。 

从 表达 式 中 哪个 位 置 开始 求 值 是 由 运算 符 的 优先 级 决定 的 。 之 后 会 再 详 述 有 关 优 先 级 的 内 容 。 在 对 
表达 式 求 值 之 后 ， 就 能 够 得 到 求 值 结 果 ， 该 结果 称 为 表达 式 的 值 。 

以 下 是 对 表达 式 求 值 中 优先 级 问题 的 总 结 。 

@ 除了 含有 && 运算 符 、|| 运算 符 、?: 运算 符 这 三 个 运算 符 的 情况 外 ， 其 他 的 表达 式 都 是 首先 对 操作 数 进行 

求 值 。 

@ 操作 数 按 从 左 至 右 的 顺序 求 值 。 

@ 对 于 函数 方法 或 是 构造 函数 调用 表达 式 的 情况 ， 会 在 调用 前 对 参数 从 左 至 右 求 值 。 

@ 优先 对 括号 内 的 表达 式 求 值 。 

@ 如 果 在 对 操作 数 求 值 的 过 程 中 产生 了 异常 ， 则 不 会 对 剩余 的 操作 数 进行 求 值 。 

@ 对 于 函数 方法 或 是 构造 函数 调用 表达 式 的 情况 ， 如 果 在 对 参数 进行 求 值 的 过 程 中 发 生 异 常 ， 则 不 会 对 剩余 

的 参数 进行 求 值 。 

JavaScript 中 的 运算 规则 其 实 和 Java 并 没有 太 大 的 差别 。 不 过 ， 由 于 在 JavaScript 中 存在 很 多 隐 式 
数据 类 型 转换 ， 所 以 有 时 不 太 容 易 理解 运算 的 实际 行为 。 例 如 ， 对 字符 串 值 和 数值 进行 比较 的 情况 ,在 
Java 中 会 发 生 编 译 错 误 ， 而 在 JavaScript 中 则 会 先进 行 隐 式 数据 类 型 转换 ， 之 后 正常 比较 。 不 会 发 生 编 
译 错误 貌似 是 一 种 优点 ， 但 实际 上 这 会 导致 更 高 的 复杂 性 。 隐 式 数 据 类 型 转换 一 方面 为 开发 提供 了 便利 ， 
另 一 方面 也 常常 是 产生 错误 的 原因 。 


| 4.30 | 运算 符 的 优先 级 以 及 结合 1 


运算 符 之 间 有 着 优先 级 ( 参见 表 4.5 )。 例如， 在 下 面 的 代码 中 ， 乘 法 运算 会 先 于 加 法 运算 。 此 外 ， 


kul 












































































































































































































































和 通常 的 算术 表达 式 一 样 ， 在 JavaScript 中 也 可 以 通过 添加 括号 来 改变 运算 顺序 。 


// 运算 符 的 优先 级 
TE LU // 将 会 首先 计算 2*3 
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对 于 优先 级 相同 的 运算 符 ， 则 是 根据 运算 符 的 结合 规则 来 决定 运算 的 先后 顺序 。 结 合 规则 分 为 左 结 
合 与 右 结合 两 种 。+ 运算 符 是 左 结合 的 ， 所 以 代码 清单 4.10 中 表达 式 里 的 第 一 个 + 运算 符 (1 与 2 之 间 
的 那个 ) 的 左 操作 数 是 1， 右 操作 数 是 2。 第 二 个 + 运算 符 (2 与 3 之 间 的 那个 ) 的 左 操作 数 是 1+2 的 
值 ， 右 操作 数 是 3。 

假如 + 运算 符 是 右 结合 的 话 ， 情 况 将 变 为 第 一 个 + 运算 符 的 左 操作 数 为 1， 右 操作 数 为 2+3 (的 值 )， 
第 二 个 + 运算 符 的 左 操作 数 为 2， 右 操作 数 为 3。 
| 代码 清单 4.10 算术 运算 符 的 结合 律 为 左 结合 


Lp 
J 
+ 2) + 


的 方式 被 求 信 


@ 前 置 单 目 运算 符 是 右 结合 的 

@ 后 置 单 目 运 算 符 是 左 结合 的 。 

@ 除 赋值 运算 符 之 外 的 双 目 运算 符 都 是 左 结合 的 。 
@ 赋值 运算 符 是 右 结合 的 。 

@ 三 目 运算 符 是 右 结合 的 。 


单 目 运算 符 的 结合 律 是 显而易见 的 。 对 于 除了 赋值 运算 符 以 外 的 双 目 运算 符 ， 以 算 木 运算 符 的 方式 
来 考虑 的 话 也 不 难 理解 。 而 三 目 运 算 符 本 身 就 是 比较 特殊 的 运算 符 ,需要 男 外 考虑 。 于 是 ， 结 合 律 比较 
特殊 的 其 实 就 具有 赋值 运算 符 而 已 。 之 所 以 在 双 目 运算 符 中 只 有 赋值 运算 符 是 右 结合 ， 是 为 了 应 对 下 面 
这 种 同时 对 多 个 变量 进行 赋值 的 赋值 表达 式 的 情况 。 


WY WO 
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x= (y= ( 
的 方式 被 求 值 
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” 4.31 | 算术 运算 符 


表 4.6 对 算术 运算 符 进 行 了 总 结 。 如 果 操 作 数 不 是 数值 ， 则 会 先 将 其 转换 为 数值 后 再 进行 计算 。 其 
运算 结果 也 是 数值 。 在 之 后 还 会 对 + 运算 符 的 一 些 注意 事项 进行 说 明 。 














十 0 法 
= 减法 
R 乘法 
除法 
9% 区 模 
置 ) 增 
置 ) 增 
置 ) 减 
置 ) 

目 ) 

目 ) 







































































减 
符号 反 转 
符号 保持 不 变 
对 于 算术 运算 符 ， 有 一 些 需 要 注意 的 地 方 。 首 先 ,+ 运算 符 比 起 加 法 运算 符 ， 会 优先 作为 字符 审 
接 运 算 符 并 对 操作 数 进行 数据 类 型 转换 。 详 细 信 息 请 参见 3.9.1 节 。 
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然后 需要 注意 的 是 ， 在 JavaScript 所 有 算术 运算 中 的 数值 都 是 浮 点 小 数 。1/2 的 结果 将 会 是 0.5。 如 
果 只 考虑 JavaScript 一 种 语言 可 能 会 认为 这 是 理 所 应 当 的 ， 不 过 因为 在 那些 具有 整 型 数值 的 语言 中 1/2 的 
结果 为 0， 所 以 这 一 点 对 于 习惯 了 其 他 语言 的 人 来 说 ， 反 而 会 是 一 个 容易 出 错 之 处 。 此 外 ， 在 JavaScript 
中 一 个 数 被 0 除 之 后 也 不 会 发 生 错误 ， 而 是 得 到 NaN 的 结果 。 
昌 说 算术 运算 符 会 把 操作 数 转换 为 数值 类 型 ， 不 过 如 果 操 作 数 比较 特殊 的 话 ， 转 换 后 的 结果 也 可 能 
会 是 NaN。 操 作 数 是 NaN 的 算术 运算 结果 始终 是 NaN。 在 大 部 分 情况 下 这 将 引起 错误 ， 无 法 得 到 期 望 的 
结果 。 
































++ 运算 符 的 含义 是 对 操作 数 加 1。-- 运算 符 的 含义 是 对 操作 数 减 1。 这 两 个 运算 符 都 会 重 写 操作 数 
的 值 。 这 类 会 改写 操作 数 本 身 的 值 的 运算 符 ， 称 为 破坏 性 运算 符 ”"。 因 此 ,需要 在 左 值 处 书写 操作 数 ， 也 
就 是 说 在 赋值 表达 式 的 左边 书写 表达 式 。 这 么 说 可 能 有 些 难 以 理解 ， 总 之 ++ 运算 符 与 -- 运算 符 的 操作 
数 将 作为 右 值 读 取 ， 并 且 在 其 左 值 处 需要 书写 表达 式 。 

















前 置 运算 符 与 后 置 运算 符 的 区 别 在 于 运算 结果 的 值 不 同 。 前 置 运算 符 的 值 ， 是 进行 了 加 法 或 减法 运 
算 之 后 的 值 。 而 后 置 运算 符 的 值 ， 则 是 在 进行 加 法 或 是 减法 运算 之 前 的 值 。 请 看 具体 的 例子 (代码 清单 
4.11 )。 
| 代码 清单 4.11 ”前 置 运算 符 与 后 置 运算 符 的 区 别 

// 前 置 运 算 符 的 行为 


Var Tn = 103 
Var m = ++n; 


print (m，n); // n 变 为 了 11。++n 的 值 是 进行 了 加 法 之 后 的 值 ， 所 以 m 为 11。 
1 


// 后 置 运算 符 的 行为 
Var nl = 10; 
var m = n++; 


print (m，n); // n 变 为 了 11。++n 的 值 是 进行 了 加 法 之 前 的 值 ， 所 以 m 为 10。 
加 0 


之 前 已 经 说 过 ，++ 运算 符 、-- 运算 符 是 破坏 性 运算 符 。 因 此 如 果 不 注意 JavaScript 中 的 隐 式 数据 类 
型 转换 的 话 ， 就 很 容易 产生 错误 ( 请 参见 3.9.7 市 )。 


| 4.32 | 字符 串 连接 运算 符 
+ 运算 符 和 二 = 运算 符 是 两 个 字符 串 连 接 运 算 符 ， 其 运算 结果 为 字符 串 值 。 如 果 操 作 数 不 是 字符 串 


型 ， 则 会 先 对 其 进行 数据 类 型 转换 之 后 再 进行 运算 。 
此 类 运算 符 的 详细 信息 请 参见 3.3.2 节 。 


| 4.33 | 相等 运算 符 


在 JavaScript 中 有 两 种 相等 运算 符 ， 即 === 和 ==， 它 们 分 别 有 对 应 的 不 相等 运算 符 !== 和 !=。 在 




























































































GD 赋值 运算 符 是 另 一 种 有 代表 性 的 破坏 性 运算 符 。 
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ECMAScript 中 ，=== 被 称 为 Strict Equals 运算 符 ， 而 == 则 被 称 为 Equals 运算 符 。 

这 两 个 运算 符 有 好 几 种 翻译 方式 。 在 本 书 中 ,将 Strict Equals 运算 符 (=== ) 称 为 全 等 运算 符 ， 而 将 
Equals 运算 符 (= ) 称 为 相等 运算 符 。 两 者 的 区 别 在 于 ， 是 和 否 会 在 进行 相等 判定 时 进行 数据 类 型 转换 。 
全 等 运算 不 会 进行 数据 类 型 转换 ， 因 此 数据 类 型 是 否 一 致 也 是 判断 是 否 相 等 的 内 容 之 一 。 而 相等 运算 
(== ) 会 先进 行 数 据 类 型 转换 ， 在 数据 类 型 相同 后 再 进行 相等 判断 。 两 种 运算 符 的 运算 结果 都 是 布尔 值 。 
全 等 运算 与 它 给 人 的 第 一 印象 较为 相近 。 除 了 对 字符 串 的 比较 是 比较 其 内 容 外 ， 其 执行 方式 和 C 语 
言 或 是 Java 之 类 的 静态 程序 设计 语言 中 的 相等 运算 ( == ) 几乎 是 一 样 的。 不 过 ， 对 于 那些 静态 程序 设计 
语言 来 说 ， 如 果 两 侧 的 数据 类 型 不 同 ， 通 常会 导致 编译 错误 (有些 则 会 进行 数据 类 型 转换 后 再 做 相等 运 
算 )。 而 在 JavaScript 中 ， 全 等 运算 对 于 这 种 情况 仅仅 是 得 到 一 个 为 假 的 结果 而 已 。 下 面 总 结 了 全 等 运 和 扯 
的 一 些 特性 。 

1.X 与 y 如 果 数 据 类 型 不 相符 ， 则 结果 为 假 。 

2. 两 者 都 是 undefined 值 或 两 者 都 是 null 值 的 情况 ， 结 果 为 真 。 

3. 两 者 都 是 数值 ， 但 有 一 方 为 NaN， 或 者 两 者 都 是 NaN 的 情况 ， 结 果 为 假 。 否 则 ， 如 果 数 值 相等 则 结果 为 

真 ， 不 相等 则 为 假 。 

4. 两 者 都 是 字符 串 的 情况 下 ， 如 果 内 容 一 致 则 结果 为 真 ， 否 则 结果 为 假 。 

5. 两 者 都 是 布尔 值 的 情况 下 ， 如 果 值 一 致 则 结果 为 真 ， 否 则 结果 为 假 。 

6. 两 者 都 是 对 象 引 用 的 情况 下 ， 如 果 引 用 的 是 同一 个 对 象 则 结果 为 真 ， 否 则 结果 为 假 。 

相等 运算 一 由 于 会 进行 隐 式 数据 类 型 转换 ， 所 以 其 执行 方式 更 为 复杂 。 下 面 是 对 其 运算 规则 的 总 结 。 

@ x 与 y 的 数据 类 型 相同 时 ， 与 全 等 运算 的 结果 相同 。 

@ x 与 y 的 数据 类 型 不 同时 ， 判 定 规则 如 下 。 

( 1 ) 一 方 为 null 值 ， 另 一 方 为 undefined 值 的 情况 ， 结 果 为 真 。 

( 2 ) 一 方 为 数值 ， 另 一 方 为 字符 串 值 的 情况 ， 将 字符 串 值 转换 为 数值 之 后 对 数值 进行 比较 。 

( 3 ) 一 方 为 布尔 值 ， 另 一 方 为 数值 的 情况 ， 将 布尔 值 转换 为 数值 之 后 对 数值 进行 比较 。 

( 4 ) 一 方 为 布尔 值 ， 另 一 方 为 字符 串 值 的 情况 ， 将 两 者 都 转换 为 数值 后 对 数值 进行 比较 。 

( 5 ) 一 方 为 数值 ， 另 一 方 为 对 象 引 用 的 情况 ， 将 对 象 引 用 转换 为 数值 后 对 数值 进行 比较 。 

( 6 ) 一 方 为 字符 串 值 ， 另 一 方 为 对 象 引 用 的 情况 ， 将 对 象 引 用 转换 为 字符 串 值 后 对 字符 串 的 内 容 进行 比较 。 
(7) 以 上 6 种 情况 之 外 的 运算 结果 都 为 假 。 


”4.34 | 比较 运算 符 


>、<、 二 = 和 >= 这 四 种 运算 符 是 比较 运算 符 。 比 较 运 算 符 的 运算 结果 为 布尔 值 。 如 果 两 个 操作 数 都 
是 数值 ， 则 对 这 两 个 数值 的 大 小 进行 比较 。 如 果 两 个 操作 数 都 是 字符 串 型 则 对 字符 串 值 内 容 的 Unicode 
编码 进行 大 小 比较 。 

如 果 两 个 操作 数 的 类 型 不 同 ， 则 遵循 以 下 规则 。 

1. 一 方 为 数值 ， 另 一 方 为 可 以 被 转换 为 数值 的 数据 类 型 的 情况 ， 将 其 转换 为 数值 类 型 后 再 进行 大 小 比较 。 

2. 如 果 操 作 数 中 含有 NaN 则 结果 为 假 "。 

3. 一 方 为 字符 串 值 ， 另 一 方 为 可 以 被 转换 为 字符 串 值 的 数据 类 型 的 情况 ， 将 其 转换 为 字符 串 值 后 再 对 字符 串 

值 进行 大 小 比较 。 
4. 操作 数 中 有 无 法 被 转换 为 数值 及 字符 串 值 的 值 ， 或 是 转换 结果 为 NaN 的 情况 ， 运 算 的 结果 为 假 。 



































































































































中 在 ECMAScript 第 5 版 中 其 运算 结果 为 undefined 值 
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在 两 个 操作 数 都 是 字符 串 型 的 情况 下 ， 将 对 字符 串 进行 大 小 比较 。 但 如 果 操 作 数 中 只 有 一 个 是 字符 
串 的 话 ， 则 会 将 该 字符 串 转 换 为 数值 类 型 。 请 看 下 面 的 例子 。 


了 // 以 字符 串 值 形 式 比较 ( 由 于 ' 9' 的 编码 值 大 于 '1' ， 因 此 结果 为 false ) 


false 


jE “00 S Oo // 字符 串 值 将 转换 为 数值 ， 判 断 100>99 并 得 到 结果 true 


EUE 


在 通常 的 数学 概念 中 ， 对 x 与 y 两 个 数值 进行 大 小 比较 时 ，x>y 和 x<=y 中 只 会 有 一 方 的 结果 为 真 ， 不 会 
发 生 两 者 都 为 真 或 是 两 者 都 为 假 的 情况 。 不 过 在 JavaScript 中 ， 比 较 运 算 可 能 会 经 过 数据 类 型 转换 ， 所 以 可 能 
出 现 两 者 都 为 假 的 情况 。 这 可 能 会 引起 错误 ， 所 以 有 必要 加 以 注意 。 下 面 是 一 个 具体 的 例子 。 

在 此 仅 对 > 与 <= 的 情况 作 了 说 明 ，> 与 < 的 情况 类 似 。 

// 转换 为 数值 类 型 后 变 为 了 NaN 的 字符 串 值 ( 参见 表 3 .17 ) 

J > // >= 的 结果 也 是 false 


js> 1 <= 'x'; // < 的 结果 也 是 false 
false 


// undefined 值 的 数据 类 型 转换 ( 参见 表 3 .18 ) 

js> undefined > 0; // 在 转换 为 数值 之 后 比较 
false 

js> undefined <= 0; // 在 转换 为 数值 之 后 比较 
false 

js> undefined > undefined; // 在 转换 为 数值 之 后 比较 


false 
下 面 是 一 些 其 他 类 型 的 数据 转换 与 大 小 比较 的 示例 。 


// 布尔 值 的 数据 类 型 转换 ( 参见 表 3 .18 ) 

js> true > false; // 在 转换 为 数值 之 后 比较 
true 

js> true > 0 // 在 转换 为 数值 之 后 比较 


true 


























// null 值 的 数据 类 型 转换 ( 参见 表 3 .18 ) 

ES wi // 在 转换 为 数值 之 后 比较 
true 

JE ol se // 在 转换 为 数值 之 后 比较 


false 


// object 类 型 的 数据 类 型 转换 ( 参见 表 3 .19 ) 

Bs var ob = 2 

js> obj > 0; // 在 转换 为 数值 之 后 比较 
false 

js> obj <= 0; // 在 转换 为 数值 之 后 比较 


false 


js> obj.valueOf = function() { return 1; } 
js> obj > 0; // 在 转换 为 数值 之 后 比较 


true 





| 4.35 jin 运算 符 


in 是 一 种 用 于 检验 属性 是 否 存在 的 运算 符 ， 其 运算 结果 为 布尔 值 。 具 体 的 执行 方式 请 参见 5.9 节 。 
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4.36 | instanceof 运算 符 


instanceof 是 一 种 用 于 类 型 判断 的 运算 符 ， 其 运算 结果 为 布尔 值 。 具 体 的 执行 方式 请 参见 5.17.3 节 。 























4.37 | 逻辑 运算 符 


表 4.7 对 逻辑 运算 符 做 了 总 结 。 尽 管 在 其 他 很 多 程序 设计 语言 中 ,逻辑 运算 的 运算 结果 是 布尔 值 ， 
但 在 JavaScript 中 并 没有 这 样 的 限制 ， 也 可 以 是 非 布尔 值 的 结果 。 不 过 ， 由 于 这 可 能 会 使 习惯 于 其 他 程序 
设计 语言 的 开发 者 产生 误解 ， 所 以 并 不 推荐 在 代码 中 使 用 这 一 特性 。 









































表 4.7 逻辑 运算 符 























短路 规则 
! 逻辑 非 ( NOT ) 无 ( 单 目 运算 符 ) 
&& 逻辑 与 ( AND ) 若 左 操作 数 的 值 为 假 ， 则 不 再 对 右 操作 数 进行 求 值 。 
! 逻辑 或 ( OR ) 若 左 操作 数 的 值 为 真 ， 则 不 再 对 右 操 作 数 进行 求 值 。 






























































如 果 逻 辑 运算 的 操作 数 不 是 布尔 值 ， 则 在 将 其 转换 为 布尔 型 之 后 再 进行 运算 。 关 于 布尔 型 的 转换 规 
则 ， 请 参考 3.9.4 节 。 

在 将 操作 数 转换 为 布尔 型 之 后 ，! 运算 会 再 对 其 进行 逻辑 非 和 运算。 逻辑 非 运算 会 在 调换 true 和 false 
值 之 后 返回 一 个 布尔 值 的 结果 。 

&& 运算 和 | 运算 有 一 个 重要 的 性 质 一 一 短路 求 值 。 一 般 的 运算 符 会 在 运算 前 先 对 操作 数 进行 求 值 。 
如 果 是 双 目 运算 符 ， 则 会 对 前 后 两 个 操作 数 事先 进行 求 值 后 再 进行 运算 。 与 之 不 同 的 是 ， 逻 辑 运 算 符 在 
运算 前 仅 会 先 对 左边 的 操作 数 进行 求 值 。 

只 要 满足 了 表 4.7 中 的 短路 规则 ， 运 算 就 会 终止 ， 从 而 不 再 对 右 操作 数 进行 求 值 。 此 时 ， 运 算 结 果 
就 是 左 操作 数 的 值 ( 在 进行 数据 类 型 转换 之 前 的 值 )。 如果 没 有 满足 短路 规则 ， 则 会 对 右 操 作 数 进行 求 
值 。 运 算 结果 为 右 操作 数 的 值 (在 进行 数据 类 型 转换 之 前 的 值 )。 由 于 逮 辑 运算 的 结果 ， 是 在 进行 数据 类 
型 转换 之 前 的 值 ， 所 以 并 不 一 定 是 布尔 值 。 下 面 是 一 个 具体 的 例子 。 

js> var n = 0&&1; // 求 值 结果 为 左 操作 数 的 值 ( 短路 求 值 ) 


sper 












































var n = true && 1; // 求 值 结果 为 右 操作 数 的 数值 


pre 


var n=1|| 2; // 求 值 结果 为 左 操作 数 的 值 ( 短路 求 值 ) 


Belmel 


ve nm =anee | ry // 求 值 结果 为 左 操作 数 的 字符 串 值 


perimt (ny 





短路 求 值 是 一 种 条 件 分 支 。 短 路 求 值 仅 会 在 某 些 条 件 成 立 的 情况 下 进行 求 值 ， 如 果 不 成 立 则 不 进行 
求 值 。 如 果 使 用 让 语句 这 样 的 条 件 分 文 语句 ， 代 码 结构 会 更 加 清晰 。 而 通过 表达 式 进行 条 件 分 支 处 理 的 
话 ， 则 能 够 使 代码 变 得 更 为 简短 。 因 此 在 希望 代码 尽 可 能 短 的 客户 端 JavaScript 开发 中 ， 短 路 求 值 是 一 种 
常见 的 方式 。 
有 关 逻 辑 表 达 式 中 条 件 分 支 的 习惯 用 法 ， 请 参见 5.5 节 。 
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4.38 | 位 运算 符 


表 4.8 对 位 运算 符 进 行 了 总 结 。 如 果 操 作 数 不 是 数值 的 话 ， 则 会 先 将 其 转换 为 内 部 结构 为 32 位 整数 
的 数值 类 型 ， 之 后 再 进行 运算 。 位 运算 符 的 运算 结果 为 数值 。 操 作 数 被 转换 为 整数 之 后 ， 将 其 左 移 1 位 
就 能 使 值 加 倍 ， 将 其 右 移 1 位 就 能 使 值 减 半 。 由 于 这 与 通常 的 位 运算 效果 相同 ， 所 以 应 该 不 难 理解 。 

不 过 ， 疏 怕 也 不 会 有 读者 希望 以 浮 点 小 数 的 位 直接 进行 位 运算 吧 ， 毕 竟 ， 即 使 对 浮 点 小 数 的 位 进行 
左 移 操作 ， 也 不 会 使 其 值 加 倍 。 
























































表 4.8 位 运算 符 


























& 按 位 与 ( AND ) 
| 按 位 或 ( OR ) 
按 位 异 或 (XOR ) 
<< 左 移 
>> 右 移 ( 最 左 位 保持 原 符号 不 变 ) 
>>> 无 符号 右 移 ( 最 左 位 被 置 为 0 ) 
~ 单 目 运算 符 。 按 位 取 反 ， 取 1 的 补 码 




















根据 图 4.1 对 每 一 位 进行 求 值 计算 之 后 ， 就 能 够 得 到 位 运算 的 结果 。 
图 4.1 位 运算 的 真 值 表 以 及 JavaScript 运算 符 

















X1 x2|0 | ~(x1|x2) | =- ~x1 | 一 ~X2 | x1x2 | ~(x1&x2) | x1&x2 | ~(x1°x2) | x2 一 X1 一 x1|x2 | ~0 
0 0|0 |1 0 i 0 1 0 1 0 1 0 1 0 1 1 
0 a 1 1 0 0 1 1 0 0 1 1 0 0 1 1 
1 0|0 |0 0 |0 1 1 1 1 0 0 0 0 1 1 1 1 
1 1|0 10 0 0 0 0 0 0 1 1 1 1 l 1 1 1 






























































| 4.39 | 赋值 运算 符 


用 于 对 变量 赋值 的 = 运算 符 是 赋值 运算 符 。 由 于 很 多 时 候 赋 值 表达 式 都 以 表达 式 语句 的 形式 出 现 ， 
所 以 很 容易 将 赋值 看 作 一 种 语句 。 不 过 从 语法 上 来 说 ， 赋 值 是 一 种 表达 式 。 下 面 的 例子 说 明了 赋值 运算 
符 的 右 结合 特性 ， 从 这 一 点 也 可 以 看 出 这 是 一 种 表达 式 。 

X=Yy=2= 0; 

赋值 表达 式 持 有 其 运算 的 结果 ， 即 所 赋 的 值 。 上 面 的 z=0 这 一 赋值 表达 式 的 运算 结果 为 0。 而 这 一 
结果 又 被 用 于 y=0 这 一 赋值 表达 式 。 然 后 ，0 这 一 结果 又 再 次 被 用 于 x=0 这 一 赋值 表达 式 中 。 这 样 一 来 ， 
在 1 个 表达 式 中 就 实现 了 对 3 个 变量 的 赋值 。 

因为 赋值 是 一 种 表达 式 ， 所 以 下 面 的 代码 并 没有 违反 语法 规则 ( 事实 上 ， 这 可 以 说 是 一 个 颇 为 有 名 
的 例子 )。 

// 是 否 有 问题 呢 ? 

if (x = y) { 省 略 } 

在 这 段 代码 中 ， 表 达 式 x-y 的 结果 会 被 作为 语句 的 条 件 来 进行 判定 。 由 于 x-y 的 结果 为 y 的 值 ， 
所 以 这 段 代码 实际 上 与 下 面 的 代码 是 等 价 的 。y 的 值 将 会 被 转换 为 布尔 型 ， 若 该 值 为 真 ， 则 将 执行 让 语 
句 中 的 代码 。 

// 尽管 与 上 一 段 代码 等 价 ， 不 过 这 样 的 程序 是 否 能 够 按照 预期 设想 的 那样 工作 呢 ? 


2 
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if (y) { 省 略 } 
前 面 之 所 以 说 那 段 代码 有 名 ， 是 因为 在 大 多 数 时 候 ， 它 都 只 不 过 是 写 错 了 以 下 代码 而 得 到 的 结果 罢 
Ti 


// 第 一 段 代 码 大 概 是 希望 写成 这 样 的 吧 
a le Se Wp 


这 种 错误 可 以 说 在 整个 软件 发 展 史 中 频繁 出 现 ， 所 以 即使 在 语法 上 没有 问题 ， 也 不 推荐 将 赋值 表达 
式 作 为 条 件 表 达 式 来 使 用 


4.40 | 算术 赋值 运算 符 


算术 赋值 运算 符 指 的 是 表 4.5 中 的 +=、 一 等 将 算术 运算 符 与 = 相连 的 运算 符 。 算 术 赋 值 运算 符 的 作 
用 是 将 算术 运算 的 结果 赋值 ， 相 应 的 表达 式 运 算 结果 即 为 该 运算 结果 的 值 。 


4.41 | 条 件 运算 符 ( 三 目 运算 符 ) 


条 件 运 算 符 是 唯一 的 三 目 运算 符 。 由 于 三 目 运算 符 只 有 这 一 个 ， 所 以 有 时 也 会 直接 把 条 件 运算 符 称 
为 三 目 运算 符 。 与 && 运算 符 和 | 运算 符 一 样 ， 条 件 运算 符 也 有 短路 求 值 的 特性 。 

条 件 运 算 符 的 语法 结构 如 下 所 示 。 

// 条 件 运算 表达 式 的 语法 

条 件 表 达 式 ? 表达 式 1 : 表达 式 2 

条 件 表达 式 的 操作 数 会 首先 被 求 值 。 得 到 的 值 将 会 转换 为 布尔 型 ， 如 果 为 真 的 话 则 对 表达 式 1 进 

行 求 值 如 果 为 假 则 对 表达 式 2 进行 求 值 。 表 达 式 1 与 表达 式 2 中 仅 有 一 个 会 被 求 值 。 条 件 运 算 表 达 式 
的 运算 结果 会 是 表达 式 1 或 表达 式 2 的 值 ， 因 此 运算 结果 的 类 型 是 由 操作 数 来 决定 的 。 
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| 4.42 | typeof 运算 符 


typeof 是 一 种 用 于 数据 类 型 判定 的 单 目 运算 符 ， 它 支持 任意 类 型 的 操作 数 。 其 运算 结果 是 标识 操作 
有 通过 表 4.9 再 次 对 此 进行 总 结 。 
























































数 的 数据 类 型 的 字符 串 值 。 在 第 3 章 中 有 过 介绍 ， 这 上 


表 4.9 typeof 运算 


















































typeof 运算 的 结果 
字符 串 型 String ” 
数值 型 number 
布尔 型 "boolean" 
null 型 "object" 
undefined 型 "undefined" 
Object 型 "object" 
函数 "function" 
XML ( E4X ) "Xml 



































对 于 标准 的 对 象 来 说 ，typeof 运算 的 结果 一 定 是 "object"， 不 过 对 于 非 标准 对 象 ， 结 果 则 取决 于 其 具 
体 实现 。 
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4.43 | new 运算 符 





new 是 用 于 生成 对 象 的 单 目 运算 符 。 关 于 new 运算 符 的 详细 信息 ， 请 参见 





4.44 | delete 运算 符 


delete 是 用 于 删除 属性 的 单 目 运算 符 ， 其 功能 为 从 对 象 中 删除 以 操作 数 指定 的 属性 。delete 运算 的 运 
算 结果 为 布尔 值 。 如 果 属 届 性 被 删除 ， 或 所 要 删除 的 属性 不 存在 ， 则 结果 为 真 ， 否 则 结果 为 假 。 


















































其 具体 执行 方式 请 参见 5.9 节 。 
在 JavaScript 中 ， 从 内 部 结构 来 看 ， 全 局 变量 是 全 局 对 象 的 属性 ( 请 参见 5.3 节 )。 
运算 的 操作 数 是 一 个 全 局 变量 ， 人 情况 则 有 些 特殊 。 























不 过 如 果 delete 











通过 var 声明 的 全 局 变量 是 无 法 被 delete 的 ， 而 没 用 使 用 var 声明 的 隐 式 的 全 局 变量 则 可 以 被 delete。 














正如 在 第 2 章 最 初 所 说 的 ， 不 推荐 使 用 隐 式 的 全 局 变量 。 因 此 ， 原 则 上 不 应 对 全 局 变量 进行 delete 运算 。 


4.45 | void 运算 符 








void 是 undefined 类 型 的 单 目 运算 符 。 无 论 向 其 传递 什么 操作 数 ， 其 运算 结果 都 会 
下 面 是 一 个 具体 的 例子 。 

J epee (eel 0) // 操作 数 为 数值 

undefined 


rime ve se // 操作 数 为 字符 串 值 


undefined 




















svar 0 

js> void x++; // 由 于 会 先 对 操作 数 进行 求 值 ， 所 以 x 将 自 增 
SE peur (ee) 

i 


js> void (x); // 常常 会 把 操作 数 通过 括号 包围 起 来 


是 undefined 值 。 








void 这 一 运算 符 的 用 途 比 较 难 以 理解 ， 不 过 在 客户 端 JavaScript 中 有 不 少 相 关 的 习惯 





一 个 在 HTML 中 点 击 了 标签 a 之 后 发 送 表单 内 容 的 JavaScript 代码 的 例子 。 








法 。 下 面 是 








<a href="javascript:void(document .form.submit () )"> 发 送 HTML 表单 数据 但 不 跳 转 页 面 </a> 


hred 属性 中 所 写 的 表达 式 如 果 具 有 值 的 话 ， 则 会 被 标签 a 认为 是 URL 并 跳 转 至 该 页 面 。 为 了 阻止 标 
签 a 的 这 一 行为 ， 需 要 将 href 属性 中 表达 式 的 值 强制 设 为 undefined 值 。 对 此 最 为 简单 的 惯用 方法 就 是 通 















































过 void 运算 来 实现 。 
4.46 | 去 逗号 (，) 运算 符 
逗号 运算 符 (,) 是 一 个 双 目 运算 符 ， 其 作用 为 依次 对 其 左 操作 数 与 右 操 作 数 求 值 。 逗 号 运算 符 的 运 
算 结 果 是 其 右 操 作 数 的 值 ， 也 就 是 说 其 结果 的 类 型 取决 于 所 使 用 的 操作 数 。 下 面 是 一 个 具体 的 例子 。 
Tes /mae 1 Ye a))s // 请 注意 ， 如 果 不 在 真 个 参数 外 加 括号 的 话 ， 其 含义 就 会 变 为 参数 的 数量 是 两 个 
2 
ne 由 于 旦 秆 合 Y 眉 当 于 O(2 T7902) 
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逗号 运算 符 主 要 用 于 for 语句 这 类 需要 在 表达 式 位 置 书写 多 个 表达 式 的 情况 。 


| 4.47 | 点 运算 符 和 中 括号 运算 符 


字符 . (点 ) 称 为 点 运算 符 ， 中 括号 [] 称 为 中 括号 运算 符 ， 它 们 都 是 用 于 访问 属性 的 运算 符 。 昌 然 这 
两 个 运算 符 不 太 显 眼 ， 却 有 着 很 重要 的 作用 。 
其 左 操作 数 为 对 象 引用 ， 右 操作 数 为 属性 名 。 如 果 左 操作 数 不 是 对 象 引用 的 话 ， 则 会 被 转换 为 
Object 类 型 。 点 运算 符 的 右 操 作 数 是 一 个 用 于 表示 属性 名 的 标识 符 ， 而 中 括号 运算 符 的 右 操 作 数 为 字符 
串 型 或 是 可 以 被 转换 为 字符 串 型 的 值 。 
关于 这 两 个 运算 符 的 执行 方式 ， 请 参见 5.8 节 。 关 于 两 者 在 使 用 上 的 区 别 ， 请 参见 5.8.2 节 。 


。 4.48 | 函数 调用 运算 符 

函数 调用 运算 符 通 过 0 来 实现 对 函数 的 调用 ， 其 左 操作 数 是 一 个 函数 ， 而 右 操作 数 则 是 要 传递 给 函 
数 的 参数 ( 实 参 )。 对 于 函数 调用 运算 符 究 部 有 儿 个 操作 数 ， 有 几 种 不 同 的 看 法 ， 在 本 书 中 ， 将 所 有 的 
参数 看 作 1 个 操作 数 ， 认 为 函数 调用 运算 符 是 一 个 双 目 运算 符 。 实 参 将 在 函数 调用 之 前 被 求 值 。 
j 关 函数 的 详细 信息 请 参见 第 6 章 。 


| 4.49 | 运算 符 使 用 以 及 数据 类 型 转换 中 需要 注意 的 地 广 


表 4.10 对 在 进行 数据 类 型 转换 时 需要 注意 的 运算 符 做 了 总 结 。 




















































































































































































































表 4.10 ”在 进行 数据 类 型 转换 时 需要 注意 的 运算 符 

















.运算 符 字符 串 连接 运算 优先 于 加 法 运算 。 如 果 操 作 数 中 一 方 是 字符 串 值 而 另 一 方 是 数值 , 数值 将 被 

转换 为 字符 串 值 ， 而 后 进行 字符 串 连 接 运算 

比较 运算 符 (<、>、<-、>-) 数值 比较 优先 于 字符 串 比较 。 如 果 操 作 数 中 一 方 是 字符 串 值 而 另 一 方 是 数值 , 字符 串 值 将 被 
是 转换 为 数值 ， 而 后 进行 数值 比较 

























































































图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 














@@ 076 一 一 第 2 部 分 ”JavaScript 的 语言 基础 








JavaScript 是 面向 对 象 程序 设计 语言 ， 可 以 很 轻松 地 通过 简洁 的 字面 量 形式 ， 以 及 动态 数据 类 
型 特性 来 操作 对 象 。 不 过 需要 注意 的 是 ， 其 内 部 的 实现 原理 与 现 有 其 他 主流 的 面向 对 象 程序 设 


计 语言 是 不 同 的 。 
5.1 ” 变量 的 声明 








变量 的 功能 为 持 有 某 个 值 ， 或 者 用 来 表示 某 个 对 象 。 关 于 变量 的 语法 结构 ， 请 参见 4.7 节 。 关 于 不 
通过 声明 而 直接 使 用 变量 的 方式 ， 请 参见 2.3.2 节 。 原 则 上 ， 本 书 在 使 用 变量 之 前 一 定 会 对 其 进行 声明 。 

如 果 一 个 变量 在 声明 之 后 没有 进行 赋值 ， 它 的 值 就 会 是 undefined。 对 同一 个 变量 重复 进行 声明 是 不 
会 引起 什么 问题 的 ， 原 有 的 值 也 不 会 被 清空 。 请 看 下 面 的 例子 : 


BS Var a = 7 
EDELtne l(a) 
7 









































js> var a; // 即使 对 同一 个 变量 重复 进行 声明 
js> print(a) ; NN Ny 
7 


上 面 的 代码 并 没有 实际 作用 ， 也 没有 明确 意义 ， 所 以 并 不 推荐 。 而 下 面 的 代码 倒是 常常 被 作为 一 种 





























习惯 用 法 来 使 用 。 


Var 0 3 // 一 种 习惯 用 法 。 如 果 变 量 a 已 经 具有 某 个 值 ( 严格 来 说 是 具有 某 个 可 以 被 转换 为 
true 的 值 ) 就 直接 使 用 ， 否 则 就 把 7 赋值 给 a 


在 这 段 代码 中 ， 如 果 a 是 一 个 已 经 被 声明 且 赋 值 的 变量 ， 则 不 会 有 任何 效果 ; 而 如 果 没有 被 声明 过 ， 
则 会 在 声明 的 同时 对 其 进行 赋值 操作 。 

下 面 的 代码 虽然 和 上 一 段 有 些 相像 ， 却 是 有 问题 的 。 如 果 变 量 b 没有 被 声明 过 ， 将 会 引起 
ReferenceError 异常 。 不 过 ， 也 不 能 说 它 绝 对 就 是 错 的 。 这 是 因为 ， 如 果 能 确保 在 这 条 代码 之 前 就 已 经 对 
变量 b 进行 了 声明 ， 这 段 代码 的 作用 就 变 为 了 判定 变量 b 的 值 的 真 假 ， 这 样 就 没有 问题 了 。 

war a Ga // 可 能 会 引起 ReferenceError 异常 的 危险 的 代码 


关于 如 何 判定 变量 是 否 已 经 被 声明 ， 请 参见 之 后 的 5.5 节 。 


5.2 | 变量 与 引用 


对 象 的 概念 很 好 地 说 明了 变量 是 一 种 拥有 名 称 的 客体 。 对 象 本 身 是 没有 名 称 的 ， 之 所 以 使 用 变量 ， 
是 为 了 通过 某 个 名 称 来 称呼 这 样 一 种 不 具有 名 称 的 对 象 。 下 面 是 一 个 在 JavaScript 中 将 一 个 对 象 ( 的 引 
用 ) 赋值 给 某 一 变量 的 例子 。 代 码 中 使 用 了 一 个 空 的 对 象 进行 赋值 。 

wens G9 = (ly // 将 对 象 赋值 给 变量 foo 
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变量 又 分 为 基本 类 型 的 变量 ( 值 型 变量 ) 与 引用 类 型 的 变量 。 由 于 在 JavaScript 中 ， 变 量 是 不 具有 类 
型 的 ， 因 此 从 语法 标准 上 来 看 ， 两 者 并 没有 什么 不 同 。 不过， 在 JavaScript 中 仍然 有 对 象 的 引用 这 一 概念 。 

所 谓 “ 引 用 ”， 可 以 认为 是 一 种 用 于 指示 出 对 象 的 位 置 的 标记 。 如 果 你 熟悉 C 语言 ， 把 它 理 解 为 是 和 
指针 等 价 的 东西 也 没有 问题 。 不 过 ， 引 用 不 文 持 那 些 可 以 对 指针 进行 的 运算 。 引 用 这 一 语言 功能 只 有 指 
示 位 置信 息 的 作用 。 准 确 地 说 ， 对 象 的 赋值 其 实 是 将 对 象 的 引用 进行 赋值 。 

































































为 了 更 好 地 解释 引用 这 一 概念 ， 这 里 对 引用 类 型 的 变量 和 值 型 变量 进行 比较 。 将 基本 类 型 的 值 赋值 
给 变量 的 话 ， 变 量 将 把 这 个 值 本 身 保 存 起 来 。 这 时 ， 可 以 将 变量 简单 地 理解 为 一 个 装 了 该 值 的 箱子 。 变 
量 本 身 装 有 所 赋 的 这 个 值 ， 所 以 能 够 将 该 值 从 变量 中 取出 。 如 果 在 右 侧 写 上 一 个 变量 ， 这 一 变量 的 值 将 
被 复制 给 赋值 目标 处 〈 左 侧 ) 的 变量 。 
// 将 数值 123 赋值 给 变量 a 





5 // 将 变量 a 的 值 ( 数值 123 ) 赋值 给 变量 b 

像 下 面 这 样 ， 对 变量 b 进行 自 增 操作 后 ， 变 量 a 的 值 是 不 会 发 生 改 变 的 。 图 5.1 对 这 一 执行 方式 作 
了 说 明 。 

// 接 上 面 的 代码 

js> b++; 

js> print (b); // 将 b 的 值 自 增 

124 

je peine (a) // a 的 值 不 会 发 生变 化 

下 了 总 

男 一 方面 ， 如 果 将 一 个 对 象 赋值 给 变量 ， 寺 
法 赋值 给 一 个 变量 的 。 如 果 在 右 侧 写 上 了 这 样 自 
侧 ) 的 变量 。 对 象 本 身 并 不 会 被 复制 。 


js> var a = { x:1,，y:2 }; // 将 对 象 的 引用 赋值 给 变量 a 
js> var b = a; // 将 变量 a 的 值 ( 对 象 的 引用 ) 赋值 给 变量 b 











其 实 是 把 这 个 对 象 的 引用 赋值 给 了 该 变量 。 对 象 本 身 是 无 
变量， 该 变量 所 表示 的 引用 将 被 复制 给 赋值 目标 处 〈 左 


变 
































上 | 图 5.1 值 型 变量 的 执行 方式 上 图 5.2 引用 类 型 的 变量 的 执行 方式 
5 
变量 a [ee > 


对 象 
Be Sel 
变量 b y:2 


















































I 
5 
变量 a > 
对 象 
一 ee 
是 y:2 
变量 b 3 


























如 果 像 下 面 这 样 ， 改 变 了 变量 b 所 引用 的 对 象 ， 那 么 这 一 改变 也 会 体现 在 变量 a 之 中 ， 这 是 因为 这 
两 个 变量 通过 引用 而 指向 了 同一 个 对 象 。 图 5.2 对 这 种 执行 方式 进行 了 说 明 : 
// 接 上 面 的 代码 


Sl // 改变 变量 b 所 引用 的 对 象 
js> print (b.x); // 变量 b 所 引用 的 对 象 





2 
js> print (a.x); // 可 以 发 现 变量 a 所 引用 的 对 象 也 被 改变 
2 





在 比较 了 这 两 种 赋值 后 ， 你 可 能 会 错误 地 认为 对 于 值 型 变量 而 言 ， 变 量 值 的 改变 对 于 其 他 的 变量 来 
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说 是 不 可 见 的 ， 而 对 于 引用 类 型 的 变量 ， 这 一 改变 则 是 可 见 的 。 这 是 一 种 不 正确 的 理解 。 对 于 引用 类 型 
的 变量 ， 整 个 过 程 中 发 生 改 变 的 其 实 是 其 引用 的 对 象 ， 而 不 是 该 变量 的 值 。 引 用 类 型 的 变量 具有 的 值 就 
是 引用 ( 值 )， 这 个 值 将 在 赋值 的 时 候 被 复制 。 请 看 下 面 的 代码 以 及 图 5.3。 











并 邵 
并 





























b 引用 的 是 同一 个 对 象 
的 值 ( 使 其 引用 了 另 一 个 对 象 ) 
的 对 象 没 有 发 生 改变 
























































< 人 变量 a 对 象 


$0 
y:2 
变量 b 引 


在 JavaScript 中 ， 赋 值 运算 总 是 会 把 右 侧 的 值 复制 给 左 侧 。 对 于 引用 类 型 的 变量 来 说 也 是 一 样 ， 会 将 
引用 ( 用 于 指示 对 象 的 一 种 值 ) 赋值 给 左 侧 。 函 数 调 用 过 程 中 的 参数 也 是 这 样 的 执行 方式 。 在 下 一 节 中 
将 对 此 进行 详细 说 明 。 


国 5.2.1 函数 的 参数 ( 值 的 传递 ) lL 


如 果 你 已 经 理解 了 上 一 节 的 内 容 ， 那 么 对 于 函数 的 参数 就 不 需要 特别 说 明了 ， 因 为 两 者 的 原理 是 相 
同 的 。 话 哩 如此， 不 少 读者 在 刚 接触 ， 遇 到 将 值 或 者 引用 作为 参数 传递 给 函数 的 问题 时 还 是 会 感到 迷惑 ， 
所 以 在 此 仍 将 对 此 进行 一 些 说 明 。 

代码 清单 5.1 是 一 个 典型 的 例子 ， 这 段 代 码 试图 交换 两 个 参数 的 值 ， 却 以 失败 告终 。no_swap 函数 的 
代码 试图 交换 所 传递 的 两 个 参数 a 与 b 的 值 。 然 而 ， 即 使 调用 了 这 个 函数 ， 也 不 会 对 实 参 one 和 zero 的 
值 造 成 任何 影响 。 可 以 认为 ， 在 调用 函数 时 执行 了 相当 于 a=one 以 及 b=zero 的 两 次 赋值 操作 。 变 量 one 
与 zero 不 会 发 生变 化 的 理由 ,已 经 在 前 面 一 节 中 说 明了 。 就 像 上 一 节 最 后 所 说 的 那样 ， 虽然 变 量 one 与 
zero 是 引用 类 型 的 变量 ,但 实际 上 也 只 是 对 其 引用 进行 了 复制 操作 。 因 此 ， 并 无 法 实现 对 one 和 zero 所 
引用 的 对 象 的 交换 。 


























































































































| 代码 清单 5.1 ”一 个 无 法 交换 其 两 参数 的 值 的 函数 


function no swap(a, b) { 
Var tmp = a; 
-es 
le ean 


} 
// 代码 清单 5.1 的 运行 结果 
站 


=>) 二 
js> Var Pero = 0 


es= moBswapl(lone zecl)E 
js> print (one, zero); // 变量 one 与 zero 的 值 没 有 发 生 改 变 
10 





图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 





第 5 量 与 对 象 079 @ 





在 前 一 节 的 最 后 说 到 ， 在 JavaScript 中 ， 应 该 把 赋值 运算 看 作 将 右 侧 的 值 复 制 给 左 侧 的 一 种 操作 。 而 
这 一 原则 ， 对 于 调用 函数 过 程 中 ， 参 数 对 引用 进行 复制 的 情况 也 是 成 立 的 。 这 样 的 规则 被 称 为 按 值 传递 
(call-by-value ) "。 

在 支持 对 引用 或 指针 进行 运算 的 语言 中 ， 可 以 以 代码 清单 5.1 中国 数 的 形式 ， 来 对 实 参 的 值 进行 交 
换 。JavaScript 不 支持 这 样 的 功能 ， 所 以 必须 通过 其 他 方式 来 实现 对 两 个 参数 值 的 交换 。 可 以 通过 传递 一 
个 数组 并 交换 其 中 的 元 素 , 或 者 通过 传递 一 个 对 象 并 交换 其 属性 值 之 类 的 形式 来 实现 。 代 码 清单 5.2 使 
用 了 JavaScript 自 带 的 增强 功能 ， 将 交换 结果 设 为 函数 的 返回 值 ， 这 可 以 说 是 一 种 最 为 简单 的 实现 代码 。 
| 代码 清单 5.2 一 个 能 够 交换 两 个 参数 的 值 的 函数 ( JavaScript 自 带 的 增强 功能 ) 


function swap(a, b) { 
returne lp al 
) 


// 代码 清单 5. 2 的 运行 结果 


js> [one，zerol = swap (one, zero); 









































js> print (one, zero); 
On 





国 5.2.2 字符 申 与 引用 | 


在 此 对 字符 串 与 引用 的 关系 进行 说 明 。 将 字符 串 值 赋值 给 变量 时 ， 究 竞 是 复制 了 字符 串 的 值 呢 ， 还 
是 复制 了 其 引用 呢 ? 

字符 串 型 是 一 种 基本 数据 类 型 ， 根 据 语 法 规则 ， 对 其 值 本 身 进行 复制 时 对 一 致 性 的 要 求 更 高 。 同 时 ， 
由 于 比较 运算 判断 的 正 是 字符 串 的 内 容 是 否 一 致 ， 所 以 将 其 认为 是 一 种 值 也 会 更 加 易于 理解 。 然 而 ， 在 
具体 实现 语言 时 ， 几 乎 所 有 的 JavaScript 实现 都 采用 了 引用 复制 的 方式 。 这 是 因为 ， 如 果 在 进行 变量 赋值 
时 进行 字符 串 值 的 复制 ， 效 率 将 变 得 非常 低 。 

那么 ， 是 否 可 以 把 字符 串 型 看 作 一 种 引用 类 型 呢 ? 答案 是 肯定 的 ， 将 其 看 作 值 的 类 型 也 好 ， 引 用 类 
型 也 好 ， 都 不 会 有 问题 ， 因 为 字符 串 型 是 一 种 不 可 变 类 型 。 由 于 字符 串 值 是 无 法 改变 的 ， 因 此 不 管 是 对 
其 值 本 身 进 行 复制 ， 还 是 对 其 引用 进行 复制 ， 表 面 上 并 不 会 有 什么 区 别 。 

总 而 言 之 ， 即 使 字符 串 型 在 内 部 是 以 引用 类 型 的 方式 实现 的 ， 从 语言 规则 上 来 看 它 仍 然 是 一 种 值 的 
类 型 。 不 过 以 字符 串 对 象 String 类 的 对 象 实例 ) 赋值 的 变量 ， 从 语言 规则 上 来 看 则 是 一 种 引用 类 型 。 


国 5.2.3 对 象 与 引用 相关 的 术语 总 结 | 


在 将 对 象 的 引用 赋值 给 变量 a 时 ， 这 个 对 象 将 被 称 作 “ 对 象 a”。 这 种 称 法 ,会 给 读者 一 种 ( 本 应 不 
具有 和 名字 的 ) 对 象 其 实 具 有 a 这 样 一 个 名 称 的 感觉 。 显 然 这 样 的 感觉 是 不 正确 的 ， 因 为 这 个 对 象 即使 在 
没有 变量 a 的 情况 下 ， 也 能 够 独立 存在 。 这 样 说 的 证 据 是 ， 如 果 将 变量 a 消去 ,或 是 将 变量 a 指向 其 他 
的 对 象 ， 原 来 的 这 个 对 象 仍然 会 存在 “。 话 虽 如 此 ， 每 次 都 很 准确 地 使 用 “变量 a 所 引用 的 对 象 ”这 样 的 
说 法 过 于 元 长 ， 所 以 方便 起 见 ， 还 是 称 其 为 对 象 a。 

此 外 ， 在 上 下 文 不 会 发 生 误 会 的 情况 下 ,可 以 用 “对 象 ”这 一 术语 来 指 代 “对 象 的 引用 ”。 对 象 
是 一 个 实体 ， 而 引用 是 用 于 指示 这 一 实体 的 位 置信 息 ， 两 者 本 应 是 不 同 的 。 不 过 根据 上 下 文 可 以 知 
道 ,“ 将 对 象 赋值 给 变量 a” 的 说 法 很 显然 是 指 将 对 象 的 引用 赋值 ， 所 以 方便 起 见 可 以 直接 这 么 说 。 
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(0 在 JavaScript 中 将 引用 类 型 的 变量 作为 参数 传递 时 ,实际 上 传递 的 是 引用 。 另 外 还 有 一 种 名 为 按 引 用 传递 ( call-by-reference ) 
的 说 法 ,很 容易 与 此 发 生 混淆 ， 请 注意 这 和 引用 的 按 值 传递 是 不 同 的 概念 。 
@ 事实 上 没有 被 任何 变量 引用 的 对 象 是 会 被 内 存 自动 回收 的 ， 不 过 这 已 经 是 另 一 个 话题 了 。 
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| 53 变量 与 属性 


也 许 很 多 读者 都 会 觉得 对 象 的 属性 和 变量 非常 相似 吧 。 两 者 都 可 以 通过 其 名 字 ( 变量 名 或 属性 名 ) 
来 获取 其 值 ， 也 都 可 以 作为 赋值 对 象 ， 而 写 在 赋值 表达 式 的 左 侧 。 其 实 ， 在 JavaScript 中 变量 就 是 属性 ， 
两 者 何止 是 相似 ， 本 身 就 是 同一 个 概念 。 

根据 作用 域 的 不 同 ， 变 量 可 以 被 分 为 全 局 变量 和 局 部 变量 ( 包括 参数 变量 )。 全 局 变量 是 在 最 外 层 代 
码 中 声明 的 变量 。 所 谓 最 外 层 代 码 ， 指 的 是 写 在 函数 之 外 的 代码 。 局 部 变量 则 是 在 函数 内 部 声明 的 变量 。 
全 局 变量 和 局 部 变量 两 者 的 本 质 都 是 属性 。 

全 局 变量 ( 以 及 全 局 函数 名 ) 是 全 局 对 象 的 属性 。 全 局 对 象 是 从 程序 运行 一 开始 就 存在 的 对 象 。 详 
细 的 内 容 将 会 在 之 后 的 5.21 节 中 进行 说 明 。 可 以 通过 下 面 的 方式 ， 来 实证 全 局 变 即 为 全 局 对 象 的 属性 。 













































































js> var Xx = "foO"; // 对 全 局 变量 x 进行 赋值 
Ds nm ns // 可 以 通过 this .x 进行 访问 
koe 


OA es // 全 局 函数 。 函 数 内 容 在 此 没有 影响 ， 所 以 留 空 。 

六 // 全 局 对 象 的 属性 fn 

true 

最 外 层 代 码 中 的 this 引用 是 对 全 局 对 象 的 引用 。 因 此 上 面 代码 中 的 this.x， 指 的 就 是 全 局 对 象 的 属性 
x， 这 也 就 是 全 局 变量 x。 

像 下 面 这 样 ， 在 最 外 层 代 码 中 将 this 引用 的 值 赋值 给 全 局 变量 global 的 话 ， 这 个 变量 就 不 但 是 全 
对 象 的 属性 ， 同 时 也 是 一 个 对 全 局 对 象 的 引用 ， 从 而 形成 了 一 种 自己 引用 自己 的 关系 (图 5.4 )。 


js> var global = this; // 将 this 引用 赋值 给 全 局 变量 global 
js> alobal' in thie, // 全 局 对 象 的 属性 global 












































可 


























true 





| 5.4 属性 global 具有 一 种 自己 引用 了 自己 的 关系 
最 外 层 代码 引 上 


this 引用 "和 全 局 对 杀 


var we 


最 外 层 代码 引 j 全 局 对 象 


this 引用 D>  global 


De 


这 种 关系 看 起 来 有 些 混乱 ， 在 JavaScript 中 却 很 常见 。 如 果 是 客户 端 JavaScript， 将 会 在 一 开始 就 
提供 一 个 引用 了 全 局 对 象 的 全 局 变量 window。 全 局 对 象 与 变量 window 的 关系 ， 和 之 前 例子 中 的 变量 
global 是 相同 的 。 

在 函数 内 声明 的 变量 是 局 部 变量 。 作 为 函数 参数 的 参数 变量 也 是 一 种 局 部 变量 。 局 部 变量 
数 变 量 ) 是 在 调用 函数 时 被 隐 式 生成 的 对 象 的 属性 。 被 隐 式 生成 的 对 象 称 为 Call 对 象 。 局 部 变量 通常 在 
从 函数 被 调用 起 至 函数 执行 结束 为 止 的 范围 内 存在 。 

之 所 以 说 是 “通常 ”， 是 因为 有 些 局 部 变量 在 函数 执行 结束 后 仍然 可 以 被 访问 。 这 将 在 之 后 有 关闭 包 
的 章节 中 进行 说 明 。 
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54 变量 的 查找 


从 代码 的 角度 来 看 ,( 作为 右 值 ) 写 出 变量 名 以 对 该 值 进 行 获取 的 操作 ， 或 者 写 在 赋值 表达 式 左 侧 
作为 赋值 对 象 进行 查询 的 操作 ， 都 被 称 为 对 变量 名 称 的 查找 。 

因此 ， 在 最 外 层 代码 中 对 变量 名 进行 查找 ， 就 是 查找 全 局 对 象 的 属性 。 这 其 实 只 是 换 了 一 种 说 法 ， 
在 最 外 层 代 码 中 能 够 使 用 的 变量 与 函数 ， 只 有 全 局 变量 与 全 局 函数 而 已 。 

至 于 对 函数 内 的 变量 名 的 查找 ， 前 一 节 中 已 经 介绍 过 ， 是 按照 先 查 找 Call 对 象 的 属性 ， 再 查找 全 局 
对 象 的 属性 来 进行 的 。 这 相当 于 在 函数 内 可 以 同时 使 用 局 部 变量 ( 以 及 参数 变量 ) 与 全 局 变量 。 对 于 
骨 套 函数 的 情况 ， 则 会 由 内 向 外 依次 查找 函数 的 Call 对 象 的 属性 ， 并 在 最 后 查找 全 局 对 象 的 属性 。 

这 里 使 用 了 “查找 变量 名 ”这 一 说 法 ， 较 为 抽象 ， 而 能 更 直观 体现 其 意义 的 词 则 是 变量 的 作用 域 ， 
其 具体 论述 请 参见 第 6 章 。 


| 55 对 变量 是 否 存 在 的 检验 


如 果 试 图 读 取 没 有 被 声明 的 变量 ， 则 会 引起 ReferenceError 异常 ， 这 是 一 种 错 
正 。 避 免 ReferenceError 异常 的 一 种 方法 就 是 在 5.1 节 中 提 到 的 方法 : 

var a - a || 7; // 一 种 习惯 用 法 。 如 果 变 量 a 已 经 具有 某 值 ， 则 使 用 变量 a 的 值 

该 代码 利用 了 对 已 经 声明 的 变量 再 次 声明 不 会 产生 副作用 的 特性 。 像 下 面 这 样 ， 分 成 两 行 并 使 用 不 
同 的 变量 ， 作 用 是 一 样 的 。 

// 如 果 变 量 a 已 经 具有 某 值 ， 则 使 用 变量 a 的 值 。 代 码 示例 ( 1 ) 


var a; 
ves gs EB | 2 


准确 地 说 ， 这 一 代码 并 没有 判断 变量 a 是 否 已 经 被 声明 。 例 如 在 该 例 中 ， 如 果 变 量 a 的 值 是 0 或 者 
是 " ( 空 字符 )， 它 在 被 转换 为 布尔 型 之 后 值 就 会 为 假 ， 这 时 ， 代 码 中 的 变量 b 则 会 被 赋值 为 7。 

接 下 来 的 代码 可 能 有 些 兄 长 ， 它 直接 判断 变量 a 的 值 是 否 是 undefined 值 ， 由 此 判断 出 变量 a 是 否 已 
声明 ， 或 者 是 否 在 声明 后 值 为 undefined。 

// 如 果 变 量 a 已 经 具有 某 值 ， 则 使 用 变量 a 的 值 。 代 码 示例 ( 2 ) 


Var a; 
var p= a ls Underfined ? a 7 


虽说 对 同一 变量 再 次 声明 不 会 有 副作用 ， 但 每 次 都 要 写 一 壳 var a 也 有 些 麻烦 。 为 了 避免 这 一 问题 ， 
可 以 通过 typeof 运算 来 判断 是 否 为 undefined 值 。 
请 看 下 面 的 例子 。 这 个 例子 利用 了 在 JavaScript (ECMAScript ) 中 没有 块 级 作用 域 的 特性 。 


// 如 果 变 量 a 已 经 具有 某 值 ， 则 使 用 变量 a 的 值 。 代 码 示例 ( 3 ) 
// (不 使 用 var a 的 版 本 ) 
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误 ， 必 须 对 代码 进行 修 



















































































































































































































































































if (typeof a !== 'undefined') { 
WE 
} else { 


mae 

















// 从 这 里 开始 可 以 使 用 变量 b 

在 以 上 这 些 代码 中 ， 无 法 区 分 变量 a 是 还 没 声明 ， 还 是 已 经 声明 但 值 为 undefined。 先 不 论 是 否 有 必 
要 对 此 加 以 区 分 ， 最 后 再 介绍 一 种 能 够 区 分 这 两 种 情况 的 方法 。 

在 读 取 未 声明 变量 的 值 时 会 引起 ReferenceRrror 异常 ， 所 以 不 可 以 读 取 这 一 变量 的 值 ， 但 是 可 以 仅 
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对 这 一 名 称 是 否 存 在 进行 确认 。 为 此 需要 使 用 in 运算 。 
可 以 在 最 外 层 代 码 中 ， 像 下 面 这 样 来 判断 在 全 局 对 象 中 是 否 存在 属性 a， 也 就 是 说 ， 可 以 用 来 检测 
全 局 变量 a 是 否 存 在 。 
// 用 于 判断 变量 a 是 否 已 经 被 声明 的 代码 
TE Wve a aaatfe 
Va = A 


} else { 
he 


} 
// 从 这 里 开始 可 以 使 用 变量 b 





























国 对 属性 是 否 存在 的 检验 中 


正如 5.3 节 所 述 ， 变 量 与 属性 实质 上 是 一 样 的 。 不 过 ， 如 果 变 量 或 属性 本 身 不 存在 ， 处 理 方式 则 会 
有 所 不 同 。 请 看 下 面 的 例子 : 














IS amel(a)y, // 访问 未 声明 的 变量 会 导致 ReferenceError 异常 
ReferenceError: x is not defined 
ne // 访问 不 存在 的 属性 并 不 会 引起 错误 


undefined 


js> var obj = {}; 

pimne (op // 读 取 不 存在 的 属性 仅 会 返回 undefined 值 ， 并 不 会 引起 错误 

undefined 

读 取 不 存在 的 属性 仅 会 返回 undefined 值 ， 而 不 会 引起 错误 。 但 是 如 果 对 undefined 值 进行 属性 访问 
的 话 ， 则 会 像 下 面 这 样 产生 TpyeError 异常 。 


oblong 














红 

















TypeError: obj.x is undefined 


为 了 避免 产生 TypeError 异常 ,一 般 会 使 用 下 面 的 方法 。 





ob eolby ey 


但 如 果 是 为 了 检测 对 象 内 是 否 存 在 某 一 属性 ， 还 请 使 用 in 运算 符 。 


5.6 | 对 象 的 定义 


故 5.6.1 抽象 数据 类 型 与 面向 对 条 


如 果 从 形式 上 来 定义 JavaScript 的 对 象 ， 它 就 是 一 种 属性 的 集合 。 所 谓 属 性 ， 即 名 称 与 值 的 配对 。 属 
性 值 可 以 被 指定 为 任意 类 型 的 值 ， 包 括 数 组 或 其 他 的 对 象 ， 都 没有 问题 。 之 后 还 会 说 到 ， 属 性 值 甚至 还 
可 以 是 一 个 函数 。 

面向 对 象 是 一 种 程序 设计 方法 ， 它 已 经 被 广泛 接受 ， 如 今 这 已 经 不 再 仅仅 是 一 种 方法 ， 而 成 为 了 一 
种 思想 。 本 书 并 不 会 对 此 深入 探讨 ， 仅 对 作为 一 种 程序 设计 方法 的 面向 对 象 技 术 进 行 说 明 。 尽 管 作 了 这 
样 的 限定 ， 面 向 对 象 仍 具有 多 种 含义 。 对 于 对 象 有 一 种 很 常见 的 定义 ， 即 它 是 一 种 数据 和 操作 ( 子 程序 ) 
的 结合 。 这 一 定义 可 以 理解 为 ， 将 面向 对 象 看 作 一 种 抽象 数据 类 型 的 表现 形式 。 

这 种 理解 方式 被 C++ 或 Java 等 语言 所 采用 ， 是 现在 相对 主流 的 见解 。 想 必 有 很 多 读者 都 听 说 过 面向 
对 象 的 3 要 素 ， 即 封装 、 继 承 与 多 态 吧 。 如 果 这 样 理解 的 话 ， 面 向 对 象 程序 设计 的 焦点 就 在 于 对 象 的 执 
行 方式 ， 并 将 执行 方式 的 共性 定义 为 一 种 类 型 。 

在 这 一 语 境 中 ， 常 常 使 用 类 这 一 术语 来 表达 类 型 的 含义 。 也 有 些 语言 会 把 执行 方式 与 其 实现 分 开 ， 
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将 执行 方式 定义 为 接口 。 接 口 的 实例 〈 实 体 ) 被 称 为 对 象 ， 可 以 对 其 进行 指定 的 操作 。 


国 5.6.2 实例 间 的 协作 关系 与 面向 对 旬 | 


男 一 种 面向 对 象 程序 设计 的 观点 认为 ， 与 其 考虑 执行 方式 之 间 的 共性 ， 更 应 该 关注 实例 之 间 的 协作 
关系 , 即 所 谓 的 对 象 是 进行 消息 收发 的 实体 "。 对 象 收 到 消息 之 后 将 会 对 其 作出 响应 。 从 实现 的 角度 来 看 ， 
消息 的 实质 就 是 通过 对 方法 ( 函数 ) 进行 调用 ,将 对 消息 的 响应 分 派 给 方法 来 处 理 。 从 本 质 上 来 说 ， 面 
向 对 象 这 一 术语 只 不 过 是 一 种 在 高 于 内 部 实现 的 语 境 中 所 使 用 的 、 较 为 抽象 的 概念 而 已 。 打 个 比方 ， 可 
以 把 消息 当 作 一 种 通信 协议 ， 把 对 象 当 作 一 个 Web 应 用 。 


立 5.6.3 ”JavaScript 的 对 象 | 


JavaScript 语言 所 支持 的 面向 对 象 与 后 者 的 理解 更 为 相近 。 在 JavaScript 中 ， 一 切 都 是 对 象 。 对 象 之 
间 的 协作 ( 消息 收发 ) 通过 属性 访问 ( 以 及 方法 的 调用 ) 来 实现 。 而 对 象 之 间 的 共性 ， 则 是 通过 继承 同 
一 个 对 象 的 性 质 的 方式 来 实现 。JavaScript 通过 基于 原型 的 形式 来 实现 继承 。 

一 旦 要 对 面向 对 象 的 概念 进行 说 明 ， 事 情 就 会 变 得 很 抽象 。 如 果 只 考虑 具体 该 如 何 使 用 JavaScript 的 
对 象 ， 就 不 必 考 虑 那么 多 复杂 的 问题 。 只 需要 考虑 最 核心 的 内 容 ， 将 其 理解 为 在 程序 中 可 以 进行 操作 的 
数据 的 一 种 扩充 即 可 。 此 外 ， 还 可 以 通过 函数 方法 的 形式 来 表示 对 数据 进行 操作 的 子 程序 。 这 种 想法 的 
核心 就 是 将 对 象 的 功能 进行 拆 分 并 分 别 进行 处 理 。 分 割 本 身 也 只 不 过 是 一 种 手段 。 毕 竞 ， 面 向 对 象 方法 
的 最 终 目的 是 降低 程序 的 复杂 程度 。 


7 | 对象 的 生成 


国 5.7.1 对 象 字面 量 | 


在 JavaScript 程序 中 ， 如 果 要 使 用 对 象 ， 就 需要 首先 生成 该 对 象 。 其 中 一 种 方法 是 通过 对 象 字面 量 来 
实现 对 象 的 生成 。 在 下 一 节 中 会 提 到 ， 在 代码 中 灵活 运用 对 象 字 面 量 ， 更 符合 JavaScript 的 编程 风格 。 关 
于 对 象 字面 量 的 语法 结构 ， 请 参见 2.5.2 节 。 

下 面 列举 了 一 些 可 以 使 用 对 象 字 面 量 的 情况 。 请 注意 这 里 并 没有 作 严 格 的 分 类 。 

@ 作为 singleton 模式 的 用 法 。 

@ 作为 多 值 数 据 的 用 法 ( 函数 的 参数 或 返回 值 等 )。 

@ 用 于 替代 构造 函数 来 生成 对 象 。 

轩 作为 singleton 模式 的 用 法 

在 设计 模式 中 有 一 种 singleton 模式 。 在 基于 类 的 开发 过 程 中 ， 这 种 模式 可 以 将 类 的 实例 数 限定 为 1 个 。 

之 后 也 会 提 到 ，JavaScript 可 以 实现 基于 类 的 程序 设计 ， 不 过 通常 会 作 如 下 约定 : 若 只 需 一 个 对 象 实 
例 ， 则 不 会 去 设计 一 个 类 ， 而 是 会 使 用 对 象 字面 量 。 对 类 ( 构造 函数 ) 进行 设计 以 实现 singleton 模式 的 
想法 完全 是 一 种 基于 类 的 思考 方式 ， 在 JavaScript 中 我 们 只 需 直 接 使 用 对 象 字面 量 即 可 。 

图 作为 多 值 数据 的 用 法 

可 以 通过 对 象 字面 量 来 实现 多 值 数据 。 这 种 用 法 与 作为 关联 数组 的 对 象 是 相通 的 。 例 如 ， 在 代码 清 
单 5.3 中 有 一 个 需要 三 个 参数 的 函数 ， 对 参数 是 否 为 数值 型 的 判断 已 被 省 略 。 
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QD 从 历史 上 来 看 ， 这 才 是 最 初 的 面向 对 象 的 设计 思想 。 不 过 我 个 人 并 不 认为 较 早 出 现 的 观点 就 是 了 不 起 的 或 是 更 为 正确 的 。 
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上 代码 清单 5 接受 多 个 参数 的 函数 


function getDistance(x, y, 2z) { 


} 
// 调用 代码 清单 5.3 中 的 函数 的 示例 
2 


Feturnm vae ni sorte (7 


js> getDistance(3, 2, 
这 一 功能 还 能 像 代 码 清单 5.4 那样 ， 通 过 对 象 字面 量 来 实现 。 同 样 地 ， 参 数 的 类 型 检测 已 被 省 略 。 
有 代码 清单 5.4 接受 对 象 的 函数 


function getDistance(pos) { 
Peturn EMathngsccDOSR x osos DOSE YE pos 7 DOs 
} 








// 调用 代码 清单 5 .4 中 的 函数 的 示例 


js> getDistance({ x:3, y:2, 2:2 }); 

很 难说 哪 一 种 方法 更 好 ， 两 者 各 有 千秋 。 参 数 的 数量 为 3 个 的 情况 有 些微 妙 ， 或 许 认为 代码 清单 5.3 
中 的 方法 更 为 简单 的 读者 会 更 多 一 些 。 

不 过 ， 当 参数 的 数量 越 来 越 多 时 ， 代 码 清 单 5.4 中 的 方法 的 优势 就 会 体现 出 来 。 如 果 用 代码 清单 5.3 
中 的 方法 ， 参 数 数量 增加 之 后 ， 弄 错 实 参 的 排列 顺序 的 可 能 性 也 会 上 升 ， 而 JavaScript 这 样 的 动态 程序 设 
计 语 言 对 参数 类 型 的 检测 很 弱 。 如 果 像 代码 清单 5.4 这 样 使 用 对 象 作为 参数 ， 实 参 以 对 象 字 面 量 的 方式 
传递 ， 就 不 需要 考虑 排列 的 顺序 ， 只 需要 使 用 名 称 即 可 。 在 其 他 一 些 程序 设计 语言 中 ， 文 持 对 参数 进行 
命名 的 功能 ， 这 种 功能 也 具有 类 似 的 优点 。 

在 JavaScript 中 ， 有 一 种 模拟 出 默认 参数 的 效果 的 习惯 用 法 ( 代码 清单 5.5 )。 这 种 方法 需要 与 使 用 对 
象 作 为 参数 的 方式 结合 使 用 才能 发 挥 效 果 。 所 谓 默认 参数 ， 是 指 在 调用 函数 时 如 果 没 有 实 参 ,或 是 传递 
了 null， 则 会 传递 一 个 指定 的 值 。JavaScript 并 不 支持 默认 参数 这 一 功能 ， 但 可 以 通过 代码 清单 5.5 这 样 
的 形式 来 实现 。 

通过 | 运算 可 以 将 参数 作为 布尔 型 来 判断 真 假 ， 其 中 利用 了 知 调 用 函数 时 没有 实 参 参数 的 值 则 为 
undefined 这 一 特性 。 通 常 来 说 ， 在 函数 内 对 参数 进行 赋值 不 是 一 种 好 习惯 (不仅 是 JavaScript， 所 有 的 程 
序 语言 都 是 如 此 )， 不 过 下 面 的 做 法 被 当 作 了 一 种 习惯 用 法 。 
有 代码 清单 5.5 模拟 了 默认 参数 的 效果 的 习惯 用 法 

function getDistance(pos) { 


pos = pos || { x:0，y:0，z:0 };// 如 果 没有 收 到 参数 pos 的 话 ， 则 使 用 默认 值 


recur Vac sor (os x EDOSR EDOSRY7L DOSR DoS 7 POS ZE 





































































































} 

不 但 可 以 通过 对 象 字 面 量 来 方便 地 实现 函数 参数 的 多 值 数据 传递 ， 还 可 以 通过 对 象 字面 量 ， 方 便 地 
实现 函数 的 多 值 数 据 返 回 。 在 实际 编程 中 这 很 常用 。 虽 然 直 接 在 代码 中 书写 数值 没有 什么 意义 ， 不 过 从 
形式 上 来 说 就 是 代码 清单 5.6 这 样 的 ， 所 以 ， 只 要 将 它 看 作 经 过 了 实际 的 函数 处 理 后 ， 所 得 到 的 需要 被 
返回 的 结果 即 可 。 

上 代码 清单 56 返回 多 值 数据 的 函数 


RUIEEITIGDERETL 人 WE 
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} 
// 调用 代码 清单 5.6 中 的 函数 的 示例 


ES Wen oe = eal 
"Bs Det on kr DOSmM CS zl 
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图 用 于 代替 构造 函数 的 用 法 

最 后 我 们 介绍 一 下 通过 对 象 字面 量 来 实现 一 个 用 于 替代 构造 函数 的 函数 的 用 法 。 该 函数 的 功能 是 生 
成 一 个 对 象 ， 所 以 需要 以 对 象 字面 量 作为 返回 值 ， 从 形式 上 来 说 ， 它 和 返回 多 值 数据 的 函数 是 相同 的 。 
根据 狭义 的 面向 对 象 的 定义 ， 多 值 数 据 与 对 象 的 区 别 仅 在 于 是 否 具 有 特定 的 执行 方式 。 

和 代码 清单 5.6 一 样 ， 直 接 在 代码 中 书写 数值 没有 什么 意义 ， 这 里 仅仅 是 作为 一 个 例子 用 于 说 明 而 
已 (代码 清单 5.7 )。 


上 代码 清单 57 用 于 生成 对 象 的 函数 ( 还 有 改进 的 余地 ) 


function createObject() { 
Ee Ev ne (0 
getDistance:function() { 
FeteurneMath ool en Eh thn te y En ES 汪 2) 





















































// 调用 代码 清单 5.7 中 的 函数 的 示例 


JS> Var bj = createObiject(); 


js> print (obj .getDistance()); 
4.123105625617661 


下 一 节 将 会 介绍 JavaScript 通过 构造 函数 来 生成 对 象 的 功能 。 使 用 返回 对 象 字 面 量 的 函数 ， 与 通过 
new 表达 式 来 调用 构造 函数 ， 是 两 种 不 同 风 格 的 生成 对 象 的 手段 。 不 过 ， 通 过 代码 清单 5.7 的 方法 生成 的 
对 象 ， 和 5.7.2 节 中 通过 代码 清单 5.9 的 方法 生成 的 对 象 ， 有 同样 的 不 足 。 具 体 的 改善 方法 将 在 之 后 详 述 。 
专栏 


JavaScript 中 用 于 函数 返回 多 个 值 的 增强 功能 
通过 JavaScript 1.7 的 增强 功能 ， 可 以 像 下 面 这 样 ， 通 过 数组 实现 将 返回 值 逐个 返回 的 功能 。 










































































js> function f() { 
Telaven | 2 Sl 
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EE 
EE Ieper 

TE oe bme (pe 
3 4 5 











国 57.2 ”构造 函数 与 new 表达 式 1 


构造 函数 是 用 于 生成 对 象 的 函数 。 之 后 会 再 详 述 函数 与 构造 函数 的 区 别 ， 这 里 首先 介绍 一 个 具体 例 
子 (代码 清单 5.8 )。 
可 以 直观 地 将 代码 清单 5.8 理解 为 MyClass 类 的 类 定义 。 在 调用 时 通过 new 来 生成 一 个 对 象 实例 。 


上 代码 清单 58 构造 函数 的 例子 


// 构造 函数 ( 类 的 定义 ) 
function MyClass (x, y) { 
Ee 
Ehmssye 7 
































} 


图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 














@@ 086 一 一 一 第 2 部 分 JavaScript 的 语言 基础 





// 对 代码 清单 5.8 的 构造 函数 的 调用 


js> var obj = new MyClass 


Dpeunte (ob on 
S02 


(3 2 


从 形式 上 来 看 ， 构 造 函 数 的 调用 方式 如 下 。 
@ 构造 函数 本 身 和 普通 的 函数 声明 形式 相同 。 
@ 构造 函数 通过 new 表达 式 来 调用 。 

@ 调用 构造 函数 的 new 表达 式 的 值 是 ( 被 新 生成 的 ) 对 象 的 引用 。 

@ 通过 new 表达 式 调用 的 构造 函数 内 的 this 引用 引用 了 ( 被 新 生成 的 ) 对 象 。 


国 new 表达 式 的 操作 





在 此 说 明 一 下 new 表达 式 在 求 值 时 的 操作 。 首 先生 成 一 个 不 具有 特别 的 操作 对 象 。 之 后 通过 new 表 
达 式 调用 指定 的 函数 ( 即 构 造 函 数 )。 构 造 函 数 内 的 this 引用 引用 了 新 生成 的 对 象 。 执 行 完 构造 函数 后 ， 
它 将 返回 对 象 的 引用 作为 new 表达 式 的 值 。 
new 表达 式 的 操作 就 是 以 上 这 些 。 实 际 上 其 中 还 含有 一 个 和 原型 链 有 关 的 问题 ， 将 会 在 之 后 进行 说 明 。 
图 5.5 说 明了 构造 函数 的 内 部 操作 。 





| 图 5.5 “构造 函数 的 操作 图 























new MyClass() 


function MyClass(){ 
其 中 的 this 引 j 
} 


对 象 


并 




















var obj=new MyClass() 





引用 




















对 象 


Xj 








图 构造 函数 调用 





构造 函数 总 是 由 new 表达 式 调用 。 为 了 与 通常 的 函数 调用 相 区 别 ， 将 使 用 new 表达 式 的 调用 ， 称 为 
构造 函数 调用 。 构 造 函 数 与 通常 的 函数 的 区 别 在 于 调 
因此 ， 所 有 的 函数 都 可 以 作为 构造 函数 。 也 就 是 说 ， 如 果 一 个 函数 通过 函数 调用 的 方式 使 用 ， 则 是 一 个 















































数 调 用 的 函数 与 用 于 构造 函数 调 

















用 方式 不 同 。 任 何 了 水 数 都 可 以 通过 new 表达 式 调用 ， 




















函数 ; 如 果 通 过 构造 函数 调用 的 方式 使 用 ， 则 是 一 个 构造 函数 。 在 实际 开发 中 ， 通 常会 分 别 设计 用 于 省 
] 的 函数 ， 所 以 方便 起 见 ， 将 为 了 构造 函数 调用 而 设计 的 函数 称 为 构造 
了 商 数 。 构 造 函 数 的 名 称 一 般 以 大 写字 母 开始 ( 如 MyClass )。 


























构造 函数 在 最 后 会 隐 式 地 执行 return this 操作 。 那 么 ， 如 果 在 构造 函数 中 显 式 地 写 有 returm 语句 ， 会 
发 生 什 么 情况 呢 ? 结果 可 能 不 容易 理解 。 通 过 retum 返回 一 个 对 象 之 后 ， 它 将 成 为 调用 构造 函数 的 new 表 
达 式 的 值 。 也 就 是 说 ,使 用 new 表达 式 后 返回 的 ， 可 能 是 所 生成 的 对 象 以 外 的 其 他 对 象 。 然 而 ， 如 果 调 用 
的 构造 函数 中 的 return 返回 的 是 基本 类 型 的 值 ， 则 会 无 视 这 一 返回 值 ， 仍 然 隐 式 地 执行 return this 操作 。 





这 种 操作 常常 会 造成 混乱 ,我 们 建议 不 要 再 在 构造 函数 内 使 用 return 语句 。 
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国 5.7. 构造 函数 与 类 的 定义 | 


经 过 上 一 节 的 说 明 ， 熟 悉 Java 或 C++ 等 支持 类 定义 的 语言 的 开发 者 ， 可 能 会 觉得 JavaScript 的 构造 
疯 数 有 些 奇特 。 毕竟 通过 new 表达 式 调 用 普通 的 函数 并 生成 一 个 对 象 ， 是 一 种 不 容易 理解 的 语言 特性 。 
不 过 ， 这 已 经 满足 了 类 定义 所 必需 的 功能 。 

代码 清单 5.9 是 一 个 实现 了 定义 一 个 具有 域 与 方法 的 类 的 构造 函数 的 例子 。 


| 代码 清单 5.9 ”模拟 类 定义 ( 尚 有 改进 的 余地 ) 


// 相当 于 类 的 定义 
function MyClass (x, y) { 
VN 相当 于 域 
Chiss > 
Ems SS 
// 相当 于 方法 
this.show = function() { 
Brunt (Chastr Ch 



































// 对 代码 清单 5.9 en WY 


js> var obj = new MyClass (3 


js> obj.show(); 
之 











按照 代码 清单 9， 就 能 够 从 形式 上 实现 JavaScript 的 类 定义 。 不 过 ， 代 码 清 单 5.9 作为 类 的 定义 
还 存在 以 下 两 个 问题 。 前 者 可 以 通过 原型 继承 来 解决 ， 而 后 者 可 以 通过 闭 包 来 解决 。 之 后 会 再 分 别 详 述 。 
@ 由 于 所 有 的 实例 都 是 复制 了 同一 个 方法 所 定义 的 实体 ， 所 以 效率 ( 内 存 效 率 与 执行 效率 ) 低下 。 
@ 无 法 对 属性 值 进行 访问 控制 ( private 或 public 等 )。 


5.8 | 属性 的 访问 


生成 的 对 象 可 以 通过 属性 来 访问 。 对 于 对 象 的 引用 可 以 使 用 点 运算 符 (. ) 或 中 括号 运算 符 ([]) 来 
访问 其 属性 。 需 要 注意 的 是 ， 在 点 运算 符 之 后 书写 的 属性 名 会 被 认为 是 标识 符 ， 而 中 括号 运算 符 内 的 则 
是 被 转 为 字符 串 值 的 式 子 。 请 看 下 面 的 例子 : 
































TE Re ols = | 

SE pr me // 属性 x 
3 

prinel(oB // 属性 x 


3 

JS> var key Ss > 

js> print (obj [xey] Dp // 属性 x (而 非 属性 key ) 
3 


不 过 ， 对 于 对 象 字 面 量 的 属性 名 来 说 ， 下 面 这 样 的 标识 符 或 字符 字面 量 形式 的 表示 ， 都 没 问题 。 请 
主意 不 要 与 上 面 的 规则 混淆 。 


js> var key oe 
js var ond 全 Eee 人 
js> var op { "XW;3 ;3 WX 属性 


这 里 需要 多 提 一 句 ， 属 性 访问 的 运算 对 象 并 不 是 变量 ， 而 是 对 象 的 引用 。 这 一 点 ， 可 以 从 以 下 直接 
对 对 象 字面 量 进行 运算 的 示例 中 得 到 确认 : 
je (x ya x // 属性 x 


























[a 























3 


图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 














@ 088 一 一 一 第 2 部 分 ”JavaScript 的 语言 基础 





ls > (03 A el /7 属性 过 
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现实 中 几乎 不 会 对 对 象 字面 量 进 行 运算 。 不 过 当 这 种 运算 对 象 不 是 一 个 变量 时 ， 倒 是 常常 会 以 方法 
链 之 类 的 形式 出 现 。 


国 5.8.1 属性 值 的 更 新 | 


在 赋值 表达 式 的 左 侧 书写 属性 访问 表达 式 能 够 实现 对 属性 值 的 改写 。 如 果 指 定 的 是 不 存在 的 属性 名 ， 
则 会 新 增 该 属性 。 下 面 将 不 再 使 用 右 侧 或 左 侧 的 说 法 ， 而 改 用 属性 读 取 ， 以 及 属性 写 入 这 样 的 术语 。 

可 以 使 用 delete 运算 表达 式 来 删除 属性 。 这 里 需要 注意 的 是 ， 很 难 区 分 不 存在 的 属性 与 属性 值 为 
undefined 值 的 属性 。 关 于 delete 运算 以 及 判断 属性 是 否 存在 的 方法 ， 请 参见 5.9 节 。 


国 5.8.2 点 运算 符 与 中 括号 运算 符 在 使 用 上 的 区 别 | 
选 


有 时 选择 用 于 访问 对 象 属性 的 这 两 个 运算 符 只 赁 偏好。 点 运算 符 的 表述 较为 简洁 ， 所 以 通常 都 会 
用 点 运算 符 。 不 过 ， 中 括号 运算 符 的 通用 性 更 高 。 

能 使 用 点 运算 符 的 情况 一 定 也 可 以 使 用 中 括号 运算 符 ， 反 之 未 必 成 立 。 但 也 无 需 因此 全 都 使 用 中 括 
号 运算 符 。 通 常 默 认 使 用 表述 简洁 的 点 运算 符 ， 只 有 在 不 得 不 使 用 中 括号 运算 符 的 情况 下 ， 才 使 用 中 括 
号 运算 符 。 

只 能 使 用 中 括号 运算 符 的 情况 分 为 以 下 儿 种 。 

@ 使 用 了 不 能 作为 标识 符 的 属性 名 的 情况 。 

@ 将 变量 的 值 作为 属性 名 使 用 的 情况 。 

@ 将 表达 式 的 求 值 结 果 作为 属性 名 使 用 的 情况 。 

包含 数值 或 横 杠 〈- ) 的 字符 串 不 能 作为 标识 符 使 用 。 无 法 作为 标识 符 使 用 的 字符 串 ， 不 能 用 于 点 运 
算 符 的 属性 名 ， 且 对 于 保留 字 ， 也 有 这 样 的 限制 。 不 过 ， 原 本 就 不 应 该 将 保留 字 作为 属性 名 使 用 ， 所 以 
这 里 不 再 袭 述 。 
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像 下 面 这 样 ， 将 含有 横 杠 的 属性 名 用 于 点 运算 符 会 引起 错误 。 


// 含有 横 杠 的 属性 名 
js> obj = { "foo-bar':s };} 








js> obj .foo-bar; // 将 解释 为 obj .foo 减 去 bar， 从 而 造成 错误 
ReferenceError: bar is not defined 


无 法 作为 标识 符 被 使 用 的 字符 串 ， 仍 可 以 在 中 括号 运算 符 中 使 用 。 请 看 下 面 的 例子 ， 其 中 以 字符 
值 指定 了 一 个 属性 名 。 

js> obj['foo-bar'];  ”// 使 用 [] 运算 以 字符 串 值 指定 了 一 个 属性 名 。 可 以 正常 执行 

与 
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数值 也 是 如 此 。 数 组 对 象 的 属性 名 都 是 数值 。 由 于 点 运算 符 无 法 使 用 数值 ， 因 此 只 能 使 用 中 括号 运算 
符 。 而 且 很 多 程序 设计 语言 都 是 通过 中 括号 运算 符 来 访问 数组 的 元 素 ， 所 以 可 读 性 也 随 之 提高 。 
面 的 例子 仍 使 用 了 之 前 的 代码 ， 用 于 展示 将 被 变量 的 值 作为 属性 名 使 用 的 情况 。 


I ar ey = [uy 




































































js> obj[key];  ”  ”// 属性 x (而 非 属性 key) 
如 果 表 达 式 的 求 值 结果 是 字符 串 ， 可 以 直接 用 中 括号 运算 符 通 过 该 表达 式 指定 属性 名 。 下 面 引用 出 


























自 《JavaScript 语言 精粹 》 一 书 的 一 个 具有 一 定 技巧 性 的 例子 。 








中 JavaScript: The Good Parts， 作 者 Douglas Crockford， 中 文 版 由 电子 工业 出 版 社 出 版 ， 赵 泽 欣 、 导 学 胸 译 。 一 一 译 者 注 
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这 段 代 码 会 根据 数值 的 符号 而 选择 调用 不 同 的 方法 。 方 法 调用 一 词 会 让 人 觉得 要 使 用 的 是 点 运算 符 ， 
不 过 事实 上 中 括号 运算 符 也 能 被 调用 。 
// 引用 自 《JavaSscript 语言 精粹 》 一 书 

// 仅 读 取 数 值 的 整数 部 分 的 处 理 


NatanienneE 0 > oe: lo ensy 


























国 5.8.3 属性 的 枚 举 | 


可 以 通过 for in 语句 对 属性 名 进行 枚 举 ( 代码 清音 5.10 )。 通 过 在 for in 语句 中 使 用 中 括号 运算 符 ， 
可 以 间接 地 实现 对 属性 值 的 枚 举 。 使 用 for each in 语句 可 以 直接 枚 举 属性 值 。 
































| 代码 清单 “5.10 属性 的 枚 举 


Wai 人 
for var key op 

print ('key ey // 属性 名 的 枚 举 
, print ('val ', obj [key]); // 属性 值 的 枚 举 


// 代码 清单 5 .10 的 运行 结果 
Key 
Val 








Key 
val 
key 














属性 可 以 分 为 直接 属性 以 及 继承 于 原型 的 属性 。for in 语句 和 for each in 语句 都 会 枚 举 继承 于 原型 
的 属性 。 其 中 的 区 别 以 及 for in/ for each in 语句 以 外 的 属性 枚 举 方法 ， 将 在 之 后 的 5.17.5 节 中 说 明 。 


”5.9 “| 作为 关联 数组 的 对 象 


在 2.5 节 提 到 过 ，JavaScript 的 对 象 和 Java 的 映射 (Map ) 类 似 。5.7.1 节 也 介绍 了 作为 多 值 数 据 的 
对 象 。 

如 果 将 JavaScript 对 象 的 属性 名 看 作 键 ， 属 性 值 看 作 值 ， 我 们 会 发 现 它 与 Java 中 的 映射 非常 相似 。 
JavaScript 的 对 象 还 具有 Java 的 映射 所 不 具备 的 附加 功能 〈 例如 方法 或 原型 继承 等 )， 但 也 可 以 不 理会 这 
些 功能 ， 直 接 将 其 作为 映射 来 使 用 。 


国 5.9.1 关联 数组 | 


首先 对 与 关联 数组 相关 的 术语 进行 整理 。 将 数值 作为 键 的 值 的 数据 结构 通常 称 为 数组 。 数组 是 绝 大 
多 数 程序 设计 语言 都 支持 的 一 种 基本 的 数据 结构 “。 
由 于 数组 的 键 是 连续 的 数值 ， 因 此 可 以 将 其 看 作 具 有 顺序 的 值 的 集合 。 除 了 数值 以 外 大 多 都 会 使 用 
字符 串 作 为 键 值 。 不 过 键 的 类 型 也 可 以 不 限于 字符 串 ， 对 任意 类 型 的 键 与 值 的 集合 进行 操作 的 数据 结构 
称 为 关联 数组 。 在 有 些 语言 中 ， 关 联 数组 也 被 称 为 映射 或 字典 。 也 有 根据 内 部 实现 而 将 其 称 为 散 列 的 语 
言 。 虽 然 用 词 不 同 ， 但 其 数据 结构 是 相同 的 ， 使 用 何 种 称 法 都 可 以 。 本 书 将 使 用 关联 数组 这 一 术语 。 
关联 数组 最 主要 的 用 途 是 执行 通过 键 来 读 取 值 的 操作 。 在 其 他 程序 设计 语言 ， 特 别 是 一 些 脚 本 语言 中 ， 
关联 数组 被 设计 为 一 种 语言 本 身 的 功能 ， 不 过 在 JavaScript 中 ， 必 须 通过 对 象 来 实现 关联 数组 。 


























































































































中 JavaScript 中 的 数组 将 在 之 后 的 7.1 节 中 进行 说 明 。 
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本 节 将 阐述 作为 关联 数组 的 对 象 。 请 注意 ， 并 没有 专门 用 于 关联 数组 的 对 象 ， 这 仅仅 是 对 对 象 的 一 
种 不 同 的 用 法 。 
转 关联 数组 的 操作 方式 

关联 数组 是 元 素 的 集合 ， 其 元 素 为 键 与 值 的 配对 。 关 联 数组 的 基本 操作 有 通过 键 来 获取 值 、 元 素 的 
设 定 、 元 素 的 删除 这 3 种 。 由 于 其 实体 是 JavaScript 的 对 象 ， 所 以 这 里 的 元 素 只 不 过 是 属性 的 另 一 种 说 
法 ， 而 键 与 值 分 别 是 属性 名 与 属性 值 的 别称 。 

可 以 按照 属性 访问 一 节 中 的 介绍 ， 通 过 点 运算 符 或 中 括号 运算 符 来 实现 按键 取 值 。 严 格 地 说 ， 是 将 





















































该 值 作为 右 值 来 使 用 。 
对 于 元 素 的 设 定 ， 可 以 将 点 运算 符 或 是 中 括号 运算 符 作 为 左 值 写 和 人 赋值 表达 式 。 具 体 的 例子 请 参见 
5.7.1 节 。 














对 象 的 删除 可 以 通过 delete 运算 符 。 用 对 象 的 术语 来 说 就 是 删除 属性 。 使 用 方法 如 下 。 
// 删除 关联 数组 的 元 素 的 例子 ( 属性 的 删除 ) 











js> Var map = { x:3, y:4 }; 
js>. print (map. x) 
1 


ls>r delete ma // 也 可 以 使 用 delete map['x'] 
true // 如 果 删 除 成 功 ， 则 返回 true 
js> print (map.x); // 如 果 读 取 已 被 删除 的 元 素 ， 则 返回 undefined 值 


undefined 








在 C++ 语言 中 也 有 delete 这 个 关键 字 ， 不 过 其 功能 却 全 然 不 同 。 在 C++ 中 delete 的 功能 是 释放 所 引 

用 的 对 象 的 内 存 ， 而 在 JavaScript 中 delete 只 用 于 删除 对 象 中 的 属性 。 用 映射 中 的 术语 来 说 就 是 ， 仅 仅 从 
映射 中 删除 键 , 使 其 对 应 的 值 ( 对 于 对 象 来 说 也 就 是 属性 值 ) 与 该 键 不 再 有 对 应 关系 。 虽 然 失 去 了 引用 
的 对 象 最 终 可 能 会 因为 垃圾 回收 机 制 而 消失 ， 不 过 这 并 不 是 delete 运算 的 直接 功能 。 
对 不 存在 的 元 素 进行 访问 得 到 的 结果 是 undefined 型 。 需 要 注意 的 是 ， 这 与 Java 中 映射 返回 的 null 
是 不 同 的 。 由 于 可 以 显 式 地 将 值 设 定 为 undefined 值 ， 因 此 无 法 通过 将 键 与 undefined 值 作 等 值 比较 来 实 
现 对 键 是 否 存在 的 检验 。 关 于 对 键 是 否 存在 的 检验 ， 将 在 之 后 的 5.9.2 节 说 明 。 

可 以 通过 for in 语句 对 键 进行 枚 举 。 详 细 的 说 明 请 参见 5.8.3 节 。 


国 5.9.2 作为 关联 数组 的 对 象 的 注意 点 | 


作为 关联 数组 的 对 象 有 一 些 和 原型 继承 相关 的 注意 点 。 原 型 继承 的 概念 将 在 之 后 详 述 ， 简 单 说 来 ， 
原型 继承 指 的 是 一 种 对 象 继 承 其 他 对 象 的 属性 并 将 其 作为 自身 的 属性 一 样 来 使 用 的 做 法 。 











































































































如 下 所 示 ， 从 形式 上 来 说 ， 对 象 obj 的 属性 并 不 是 其 直接 属性 ， 而 是 通过 原型 继承 而 得 到 的 属性 。 


js> function MyClass() {} 
js> MyClass.prototype.z = 5; // 在 原型 链 上 设 定 属性 z 

















js> var obj = new MyClass () ; // 属性 z 继承 了 原形 
js PELnENOD].: Zz) 
总 


for in 语句 将 枚 举 通过 原型 继承 而 得 到 的 属性 。 
// 接 之 前 的 代码 


js> for (var key in obj) { print (key); } // for in 语句 也 会 枚 举 通过 原型 继承 得 到 的 属性 
Zz 


请 注意 ,通过 原型 继承 而 得 到 的 属性 无 法 被 delete。 继 续 接 之 前 的 代码 。 
// 接 之 前 的 代码 














Pe We) // 尽管 没有 被 delete， 但 还 是 会 返回 
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teus 


js> print (obj .2); // 无 法 delete 通过 原型 继承 而 得 到 的 属性 


可 

在 将 对 象 作为 关联 数组 使 用 时 ， 通 常 都 会 使 用 对 象 字 面 量 来 生成 。 不 过 需要 注意 的 是 ， 即 使 视图 通 
过 过 使 用 空 的 对 象 字面 量 以 创建 一 个 没有 元 素 的 关联 数组 ， 也 仍然 会 从 Object 类 中 继承 原型 的 属性 。 可 以 

通过 in 运算 对 此 进行 检验 。 


js> var map = {}; // 通过 空 的 对 象 字 面 量 生成 关联 数组 
Ts eosErimneg mae // 从 object 类 中 原型 继承 了 属性 tostring 
true 


但 是 ， 通 过 for in 语句 对 元 素 进行 枚 举 不 会 有 任何 效果 。 这 是 由 于 enumerable 属性 的 缘故 ， 将 在 之 
后 的 小 节 中 说 明 。 请 参见 5.17.5 节 。 
// 接 之 前 的 代码 


js> for (var key in map) { 
print (key) ; 


Ya 没有 元素 会 被 检举 
通过 in 运算 符 检 测 关 联 数组 的 键 是 否 存 在 ， 就 会 发 生 与 原型 继承 而 来 的 属性 相关 的 问题 。 因 此 ， 像 
下 面 这 样 通过 hasOwnProperty 来 对 其 进行 检测 ， 是 一 种 更 安全 的 做 法 。 


js> var map = {}; 
js> map.hasOwnProperty('toSstring'); // 由 于 tostzring 不 是 直接 属性 ， 因 此 结果 为 false 
false 
























































ss mapl JosStringul se 1 
js> map.hasOwnPproperty('toString'); 
true 


Js> delete mapl'toSsString']; 
js> map.hasOwnProperty('toString'); 
false 





5.10 | 属性 的 属性 


虽然 说 起 来 有 些 绕 口 , 不 过 属性 也 是 有 其 属性 的 。 表 5.1 总 结 了 ECMAScript 第 5 版 中 定义 了 的 属性 。 
在 ECMAScript 中 ， 属 性 值 被 定位 为 “ 值 属性 ”这 样 一 种 属性 。 使 用 这 一 定义 的 话 ， 属 性 就 成 为 了 名 
称 (属性 名 ) 和 多 个 属性 的 集合 。 本 书 更 侧重 于 使 理解 更 为 直观 易 懂 ， 所 以 将 分 别 考虑 值 与 属性 的 问题 。 


































































































表 5.1 属性 的 属性 
属性 的 属性 名 含义 
writable 可 以 改写 属性 值 
enumerable 可 以 通过 for in 语句 枚 举 
configurable 可 以 改变 属性 的 属性 。 可 以 删除 属性 。 
get 可 以 指定 属性 值 的 getter 函数 
set 可 以 指定 属性 值 的 setter 函数 


























在 表 5.1 的 属性 中 ，enumerable 是 在 ECAMScript 第 5 版 之 前 就 被 广泛 使 用 的 属性 。 在 标准 的 对 象 中 
有 一 部 分 属性 的 enumerable 属性 为 假 而 无 法 通过 for in 语句 枚 举 。 其 中 一 个 很 容易 理解 的 例子 是 数列 的 
length 属性 。 
虽然 ECMAScript 第 5 版 对 属性 读 写 方法 进行 了 标准 化 处 理 (参见 5.18 节 )， 不 过 在 实际 的 
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(DD 对 于 可 能 产生 歧义 的 部 分 ， 将 译 为 “属性 的 属性 ”以 示 区 别 。 





译 者 注 
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JavaScript 开发 中 ， 我 们 一 般 也 不 会 用 到 对 属性 的 读 写 。 而 enumerable 也 是 标准 对 象 所 具有 的 属性 ， 所 以 
通常 也 不 需要 对 自己 生成 的 对 象 的 属性 显 式 地 进行 修改 。 不 过 属性 本 身 确 实 有 助 于 使 代码 更 为 健壮 ， 或 
许 随 着 ECMAScript 第 5 版 的 普及 ， 变 更 属性 的 情况 也 会 变 得 越 来 越 常见 。 












































5.11 垃圾 回收 


不 再 使 用 的 对 象 的 内 存 将 会 自动 回收 ， 这 种 功能 称 作 垃圾 回收 。 所 谓 不 再 使 用 的 对 象 ， 指 的 是 没有 
被 任何 一 个 属性 ( 变量 ) 引用 的 对 象 。 
由 于 JavaScript 有 着 客户 端 程序 大 多 运行 时 间 很 短 这 一 历史 原因 ， 因 此 与 其 他 程序 设计 语言 相 比 ， 开 
发 者 并 不 太 关 心 对 象 的 存在 生命 周期 。 如 果 整 个 程序 的 生命 周期 就 很 短 ， 相 对 来 说 就 没有 必要 对 每 个 对 
象 的 生命 周期 太 过 在 意 。 

不 过 随 着 最 近 各 种 Web 应 用 以 及 服务 器 端 JavaScript 程序 的 发 展 ， 情 况 发 生 了 变化 。 现 在 已 经 有 必 
要 像 其 他 的 程序 设计 语言 那样 ， 考 虑 对 象 的 生命 周期 问题 了 。 垃 圾 回收 的 目的 是 ， 使 开发 者 不 必 为 对 象 
的 生命 周期 管理 花费 太 多 精力 。 因 此 通常 只 考虑 代码 即 可 ， 具 体 的 JavaScript 实现 会 帮忙 解决 那些 麻烦 的 
问题 。 虽 说 通过 delete 来 删除 不 再 使 用 的 属性 是 一 个 不 错 的 习惯 ,但 只 要 不 会 造成 内 存 泄漏 ， 就 没有 必 
要 在 这 方面 花 太 多 的 心思 。 

不 过 ， 即 使 有 垃圾 回收 功能 ， 仍 然 有 可 能 发 生 内 存 泄漏 。 有 些 是 由 于 垃圾 回收 机 制 的 实现 存在 问题 ， 
更 多 的 是 因为 发 生 了 循环 引用 的 情况 而 造成 了 内 存 泄 漏 。 

所 谓 循 环 引用 ， 指 的 是 对 象 通过 属性 相互 引用 而 导致 它们 不 会 被 判定 为 不 再 使 用 的 状态 。 对 于 客户 
端 JavaScript 来 说 ， 存 在 几 种 常见 的 可 能 导致 循环 引用 的 情况 ， 因 此 建议 使 用 内 存 泄 漏 检测 工具 来 检测 。 










































































































































































5.12 | 不 可 变 对 象 





故 5.12.1 不 可 变 对 象 的 定义 | 


所 谓 不 可 变 对 象 ， 指 的 是 在 被 生成 之 后 状态 不 能 再 被 改变 的 对 象 。 由 于 对 象 的 状态 是 由 其 各 个 属性 
的 值 所 决定 的 ， 因 此 从 形式 上 来 说 也 是 指 无 法 改变 属性 的 值 的 对 象 。 也 有 观点 认为 ， 在 对 象 引 用 了 为 
个 对 象 的 情况 下 ， 只 有 当 那 个 被 引用 的 对 象 也 是 不 可 变 的 时 候 ， 引 用 了 它 的 对 象 才能 被 称 为 不 可 变 对 象 。 

从 广义 上 来 说 ， 不 可 变 对 象 指 的 是 不 去 改变 状态 的 对 象 。 而 从 狭义 上 来 说 ， 只 有 既 没 有 改变 ， 也 无 
法 改变 状态 的 对 象 ， 即 为 了 禁止 改变 而 专门 设计 的 对 象 ， 才 被 称 为 不 可 变 对 象 。JavaScript 中 的 一 种 典型 
的 不 可 变 对 象 就 是 字符 串 对 象 。 


国 5.12.2 不 可 变 对 象 的 作用 | 


灵活 运用 不 可 变 对 象 有 助 于 提高 程序 的 健壮 性 。 这 是 因为 ， 程 序 中 的 很 多 错误 都 是 由 于 非法 改变 了 
对 象 的 状态 而 造成 的 。 例 如 ， 将 对 象 传递 给 方法 的 参数 时 ， 存 在 方法 会 改写 对 象 内 容 的 隐患 。 如 果 那 是 
一 个 不 可 变 对 象 ， 则 不 用 担心 这 一 问题 。 不 清楚 对 象 的 内 部 构造 就 改写 很 容易 引起 错误 ， 在 排除 了 这 种 
情况 之 后 ， 就 可 以 减少 花 在 这 个 问题 上 的 精力 。 
虽然 不 可 变 对 象 是 一 种 便利 的 程序 设计 技巧 ， 但 其 实在 JavaScript 开发 中 并 没有 被 大 量 使 用 。 其 中 最 主 
要 的 一 个 原因 就 是 花 销 的 取舍 。 为 了 确保 对 象 的 不 可 变 ， 不 得 不 增加 一 些 和 主要 功能 无 关 的 代码 。 对 于 一 直 
使 用 小 规模 代码 的 JavaScript 来 说 ， 需 要 权衡 花 销 。 本 节 的 最 后 会 再 总 结 一 下 这 个 话题 。 
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国 5.12.3 实现 不 可 变 对 象 的 方式 lL 

在 JavaScript 中 可 以 通过 以 下 方式 实现 对 象 的 不 可 变 。 

@ 将 属性 ( 状态 ) 隐藏 ， 不 提供 变更 操作 。 

@ 灵活 运用 ECMAScript 第 5 版 中 提供 的 函数 。 

@ 灵活 运用 writable 属性 、configurable 属性 以 及 setter 和 getter。 

JavaScript 中 的 对 象 没有 像 private 属性 这 样 的 显 式 访问 控制 功能 。 为 了 将 属性 隐藏 ， 可 以 使 用 一 种 
被 称 为 闭 包 的 方法 。 有 具体 内 容 将 在 之 后 的 6.7.5 节 介 绍 。 

在 ECMAScript 第 5 版 中 有 一 些 用 于 支持 对 象 的 不 可 变化 的 函数 ( 表 5.2)。seal 可 以 向 下 兼容 















































preventExtensions ，freeze 可 以 向 下 兼容 seal。 这 里 的 向 下 兼容 ， 指 的 是 比 后 者 有 更 为 严格 的 限制 。 
表 5.2 ECMAScript 第 5 版 中 用 于 支持 对 象 的 不 可 变化 的 函数 














属性 新 增 属性 删除 属性 值 变更 确认 方法 
preventExtensions xX O O Object.isExtensible 
Seal X X QO Object.isSealed 
freeze X X X Object.isFrozen 









































图 5.6 一 图 5.8 是 各 个 方法 的 具体 示例 。Object.keys 方法 用 于 对 属性 枚 举 。 关 于 该 方法 的 详细 信息 ， 
请 参见 5.17.5 节 。 











5.6 Object.preventExtensions 的 例子 


SE Var ob (0 :20 
js> Object .preventExtensions (obj); 


// 无 法 新 增 属性 

EDP OD = 

js> Object .keys (obj); 
ee yc | 


// 可 以 删除 属性 

js> delete obj.y; 

js> Object.keys (obj); 
["xv] 


// 可 以 更 改 属性 值 
el on .0 
SE penelob 
2 





5.7 Object.seal 的 例子 


ERSTEEODEE (S20 
js> Object.seal (obj); 


// 无 法 删除 属性 
js> delete obj.y; // 将 返回 false 
js> Object .keys (obj); 


| ny"] 


// 可 以 更 改 属性 值 
SE oD 20 
js> pLine(loby a) 
20 
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图 5.8 Object.freeze 的 例子 


ESRaEEED (ao yo 
js> Object.freeze (obj); 


// 无 法 更 改 属性 值 


Ss> OB = 20 
oe ool el 
2 





对 于 表 5.2 中 的 方法 ， 有 以 下 几 点 需要 注意 。 
@ 一 旦 更 改 就 无 法 还 原 。 
@ 如 果 想 让 原型 继承 中 的 被 继承 方 也 不 可 变化 ， 需 要 对 其 进行 显 式 的 操作 。 


从 内 部 实现 来 看 ，seal 的 作用 是 将 属性 的 configurable 属性 置 为 假 ， 而 freeze 是 将 writable 属性 置 为 
假 。 关 于 属性 ， 请 参见 5.10 节 。 如 果 在 生成 对 象 时 ， 对 这 些 属 性 进行 显 式 地 设置 ， 也 能 够 取得 相同 的 效 
果 。 上 有 具体 方法 请 参见 5.18 节 。 

灵活 运用 属性 的 属性 ， 还 能 够 实现 只 有 getter 方法 而 没有 setter 方法 的 不 可 变 对 象 ”。 

在 本 节 的 最 后 ， 我 们 建议 尽 可 能 不 使 用 不 可 变 对 象 。 这 个 建议 听 起 来 太 过 随意 ， 没 有 什么 帮助 ， 
不 过 确实 应 该 为 程序 的 健壮 性 与 其 开销 选择 一 个 折 中 方案 。 为 了 安全 性 而 增加 开销 ， 产 品 可 能 就 会 
无 法 按时 完成 。 此 外 ， 客 户 端 JavaScript 对 代码 的 体积 有 着 严格 的 要 求 ， 因 此 过 分 注重 安全 性 的 代码 可 
能 反而 会 降低 用 户 体验 。 这 不 是 一 个 简单 的 是 非 问题 ， 而 是 一 个 需要 做 出 判断 的 问题 。 尽 管 不 可 变 对 
象 是 提升 代码 健壮 性 的 一 个 有 效 方法 ， 但 如 果 过 分 拘泥 于 此 而 降低 了 用 户 的 使 用 体验 ， 反 而 本 末 倒 置 
了 。 实 际 的 程序 开发 与 理论 研究 有 所 不 同 ， 请 时 刻 谨 记 考 虑 健壮 性 与 开销 之 间 的 平衡 。 


| 5.13 | 方法 


在 JavaScript 的 语言 规范 中 并 不 存在 方法 这 一 概念 。 方 便 起 见 ， 我 们 将 作为 对 象 属性 的 函数 称 为 方法 。 
而 在 实际 中 可 以 像 这 样 定义 方法 : 那些 使 用 了 this 引用 来 调用 并 访问 了 对 象 的 属性 的 函数 ， 被 称 为 方法 。 
方法 与 函数 名 称 两 者 可 以 随意 混用 ， 不 过 如 果 能 注意 到 正在 使 用 的 是 一 个 方法 的 话 ， 就 能 更 明确 地 意识 到 
现在 是 在 对 对 象 进行 操作 。 所 以 ， 使 用 方法 这 一 名 称 的 话 会 更 有 意义 。 

































































































































































5.14 | this 引用 


this 引用 是 一 种 在 JavaScript 的 代码 中 随时 都 可 以 使 用 的 只 读 变量 。 在 Java 或 C++ 中 也 有 功能 类 似 
的 this 引用。 在 Java 以 及 C++ 中 ，this 应 该 被 看 作 是 隐 式 传递 的 参数 ， 而 在 JavaScript 中 ，this 引用 可 以 
在 最 外 层 代 码 ( 函数 之 外 ) 使 用 ， 所 以 从 直觉 上 更 像 是 一 个 可 以 随时 使 用 的 只 读 变 量 。 

this 引用 引用 的 是 一 个 对 象 。 对 于 最 外 层 代码 与 函数 内 部 的 情况 ， 其 引用 目标 是 不 同 的 。 此 外 ， 即 
使 在 函数 内 部 ， 根 据 函 数 调用 方式 的 不 同 ， 引 用 对 象 也 会 有 所 不 同 。 需 要 注意 的 是 ，this 引用 有 着 会 根 
据 代 码 的 上 下 文 语 境 自动 改变 其 引用 对 象 的 特性 。 


国 5.14.1 this 引用 的 规则 中 
在 此 ， 总 结 一 下 this 引用 的 规则 。 













































































中 具体 的 例子 在 5.18 节 第 5 版 中 的 Object 类 中 再 为 介绍 。 
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@ 在 最 外 层 代 码 中 ，this 引用 引用 的 是 全 局 对 象 。 

@ 在 函数 内 ，this 引用 根据 函数 调用 方式 的 不 同 而 有 所 不 同 ( 参见 表 5.3 )。 

需要 注意 的 是 ， 对 于 函数 内 部 的 情况 ，this 引用 的 引用 对 象 并 不 是 根据 函数 的 内 容 或 声明 方式 而 改 
变 的 ， 而 是 根据 其 调用 方式 而 改变 。 也 就 是 说 ， 即 使 是 同一 个 函数 ， 如 果 调用 方式 不 同 ，this 引用 的 引 
用 对 象 也 会 有 所 不 同 。 














表 5.3 ”函数 内 部 的 this 引用 


















































函数 的 调用 方式 this 引用 的 引用 对 象 

构造 函数 调 所 生成 的 对 象 

方法 调 接收 方 对 象 

apply 或 是 call 调 apply 或 call 的 参数 指定 的 对 象 

































































他 方式 的 调 全 局 对 象 

对 于 构造 函数 调用 的 情况 ，this 引用 的 引用 对 象 是 所 生成 的 对 象 。 详 细 的 内 容 请 参见 5.7.2 节 。 

表 5.2 的 方法 调用 的 说 明 中 的 接收 方 对 象 是 这 样 一 种 对 象 。 

@ 通过 点 运算 符 或 中 括号 运算 符 调用 对 象 的 方法 时 ， 在 运算 符 左 侧 所 指定 的 对 象 。 

在 之 前 的 小 节 中 也 提 到 过 ， 方 法 是 对 象 的 属性 所 引用 的 函数 。 下 面 是 一 个 关于 方法 和 接收 方 对 象 的 
具体 例子 。 
// 对 象 定义 


了 BEUVXar obj 






































it: function() { printl('method is called." + this.x )» } 


SS Gl ols // 对 象 obj 是 接收 方 对 象 。doit 是 方法 。 
method is called. 3 


52 © "ee // 对 象 obj 是 接收 方 对 象 。doit 是 方法 。 
method is called. 3 


现在 说 明 上 面 的 例子 。 首 先是 将 对 象 的 引用 赋值 给 了 变量 obj。 这 个 对 象 有 两 个 属性 。 属 性 x 的 值 为 

















数值 3， 属性 doit 的 值 是 一 个 函数 。 将 该 函数 称 为 方法 doit。 
可 以 通过 点 运算 符 或 中 括号 运算 符 对 obj 调用 方法 doit。 这 时 ， 方 法 调用 的 目标 对 象 被 称 为 接收 方 对 
象 (也 就 是 说 ，obj 所 引用 的 对 象 是 一 个 接收 方 对 象 )。 被 调用 的 方法 内 的 this 引用 引用 了 该 接收 方 对 象 。 
由 于 this 引用 具有 这 样 的 特性 ，JavaScript 的 方法 拥有 了 与 Java 或 C++ 中 的 方法 相似 的 功能 。 之 后 
的 小 节 将 阐述 它们 之 间 的 细微 区 别 。apply 与 call 的 作用 是 用 于 显 式 地 指定 接收 方 对 象 ， 详 细 内 容 将 在 之 
后 的 5.15 节 说 明 。 


国 5.14.2 this 引用 的 注意 点 | 


在 之 前 的 小 节 中 说 过 ， 虽然 JavaScript 的 this 引用 在 方法 调用 中 的 执行 方式 和 Java 或 C++ 中 的 基本 
相同 ， 但 仍 应 注意 它们 之 间 存 在 一 些 细微 的 差别 。 在 Java 这 样 的 基于 类 的 语言 中 ，this 所 引用 的 接收 方 
对 象 始终 是 该 类 的 实例 ， 而 在 JavaScript 中 ， 却 不 一 定 总 是 如 此 。 

JavaScript 的 this 引用 的 引用 对 象 ， 会 随 着 方法 调用 方式 的 不 同 而 改变 。 下 面 是 一 个 简单 的 例子 ,用 于 
说 明 通 过 其 他 的 接收 方 对 象 调用 某 个 函数 ， 或 是 在 没有 接收 方 对 象 的 情况 下 ，this 引用 的 操作 是 不 同 的 。 
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js> var fn = Obj.doit; // 将 ojb.doit 引用 的 Function 对 象 赋值 给 全 局 变量 


Es a // 函数 内 的 this 引用 引用 了 全 局 对 象 


method is called. undefined 


> van 8 // 确认 this 引用 确实 引用 了 全 局 对 象 


本 二 EN 了 
method is called. 5 


js> var obj2 = { x:4, doit2:fn }; // 将 cbj 的 方法 ( Function 对 象 的 引用 ) 赋值 给 了 另 一 个 对 象 obj2 的 属性 

TE el el eel // 方法 内 的 this 引用 引用 了 对 象 obj2 

method is called. 4 

在 Java 中 常常 可 以 省 略 this， 不 用 明确 地 写 出 。 因 为 在 查找 方法 内 的 名 称 时 总 是 会 在 同一 个 类 的 域 
名 与 方法 名 中 搜索 。 而 在 JavaScript 中 就 不 能 像 这 样 省 略 this 了 。 如 果 在 上 面 的 例子 中 将 this.x 改写 为 x， 
它 的 含义 将 会 变 为 全 局 变量 x。 
图 在 方法 内 部 调用 方法 的 情况 

在 方法 内 部 调用 方法 时 也 需要 对 this 引用 多 加 注意 ， 下 面 是 一 个 例子 。 通 常 在 Java 或 C++ 中 的 方法 
内 进行 方法 调用 时 会 省 略 this， 然 而 在 JavaScript 的 方法 内 调用 其 他 的 方法 时 ， 必 须 像 下 面 的 例子 那样 通 
过 this 引用 来 实现 。 

// 从 doit ee doit2 方法 时 ， 必 须 通过 this 引用 ， 以 this .doit2() 的 方式 实现 

es var ob = 

NE 


donEe funeEiom( (ora (do cooled ens x Eh adore2 a 
doit2s functiomt) { print(dolt2 js calleds 4 thlss zm) 


所 


js> obj doLen(ys 
qdoir 4 called 3 
doir2 La callede a 


在 上 面 的 例子 中 ， 如 果 将 this.doit20 写成 doit20， 则 会 在 全 局 函数 中 搜索 doit2。 在 没有 语法 错误 时 ， 
嵌 套 的 函数 将 按 作用 域 由 内 至 外 的 顺序 来 查找 名 称 ( 请 参见 5.4 节 )。 


5.15 | apply 与 call 


在 Function 对 象 中 包含 apply 与 call 这 两 种 方法 ,通过 它们 调用 的 函数 的 this 引用 ， 可 以 指向 任意 特 
定 的 对 象 。 也 就 是 说 ， 可 以 理解 为 它们 能 够 显 式 地 指定 接收 方 对 象 。 
下 面 是 一 个 使 用 了 apply 方法 与 call 方法 的 例子 。 


TS FUGElon eI oriae (tenis 
svar ob = (0 





















































js> f.apply (obj); 
4 
jes ft oall(lobjs 
4 


// 将 接收 方 对 象 指定 为 另 一 个 对 象 并 进行 方法 调用 


ss Var oobi es 


EFunceliom( (pramne (method ls calleder rT enlis > 


js> var obj2 = { x:4 }; 





js> obj.doit.apply (obj2); // 通过 apply 调用 obj .doit 方法 。 方法 内 的 this 引用 引用 了 对 象 obj2 
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对 Function 对 象 了 使 用 apply 或 cal 方法 ， 就 能 够 调用 该 函数 。 不 考虑 图 数 内 的 this 引用 的 话 ， 这 和 人 0 
的 用 法 是 一 样 的 。 两 者 的 区 别 在 于 被 调用 的 函数 (方法 ) 内 的 this 引用 ，this 引用 的 是 作为 apply/call 的 第 一 
个 参数 被 传递 的 对 象 。 而 apply 与 call 之 间 的 不 同 之 处 在 于 两 者 对 其 他 参数 的 传递 方式 。 对 于 apply 来 说 ， 番 
余 的 参数 将 通过 数组 来 传递 ， 而 call 是 直接 按 原样 传递 形 参 。 请 通过 下 面具 体 的 例子 来 了 解 这 一 差异 。 

J funetlonneE(ta Deri es Es 


1 // 作为 第 2 个 参数 的 数列 中 的 元 素 都 是 函数 £ 的 参数 




































































js> f.apply({x 
a 


之 
Ghee = 三 冯 


ES Toe 1 © // 从 第 2 个 参数 起 的 参数 都 是 函数 £ 的 参数 
Cnn = 三 馆 


在 实际 的 编程 过 程 中 ， 我 们 常常 会 为 了 函数 回调 而 使 用 apply 或 call 调用 。 详 细 内 容 请 参见 6.8 节 。 


| 5.16 | 原型 继承 


本 节 将 闲 述 原型 继承 。 事实 上 ， 原 型 继承 的 内 部 执行 方式 是 相当 复杂 的 。 如 果 只 是 希望 能 够 使 用 原 
型 继承 ,而 没有 和 弄 清 其 用 法 的 话 ， 反 而 可 能 会 导致 混乱 的 局 面 。 因 此 ， 首 先 仅 说 明 一 下 其 形式 。 按 代码 
清单 5.9 中 的 类 定义 为 模板 ， 并 以 原型 继承 的 方式 改写 ， 就 能 得 到 代码 清单 5.11。 


上 代码 清单 5.11 使 用 了 原型 继承 的 类 定义 


// 相当 于 进行 类 定义 
function MyClass (x, y) { 
Eh 
ll SS Wp 
} 
MyClass.prototype.show = function() { 
BEane (huse x sm) 



































// 代码 于 11 的 构造 函数 调用 ( 实例 生成 ) 
js> var obj = new MyClass (3, 2); 


// 方法 调用 


lo) of) eo A 
SS 


代码 清单 5.9 与 代码 清单 5.11 的 区 别 在 于 ， 前 者 的 方法 定义 直接 是 对 象 实例 的 属性 ， 而 后 者 不 是 。 
在 代码 清单 5.11 中 ， 方 法 show 并 不 是 对 象 obj 的 直接 属性 ， 但 也 可 以 被 调用 。 从 表面 上 来 看 ， 它 是 从 
另 一 个 对 象 (MyClass.prototype ) 的 属性 继承 而 来 的 。 这 就 是 对 原型 继承 的 一 种 形式 上 的 理解 。 

在 JavaScript 中 ,保存 有 值 的 属性 和 保存 有 艺 数 的 属性 之 间 并 没有 什么 特别 的 区 别 ， 所 以 除了 方法 之 
外 其 他 的 值 也 能 够 被 原型 继承 。 不 过 在 实际 中 需要 进行 原型 继承 的 大 多 是 方法 。 此 外 ， 将 构造 函数 名 与 
类 名 进行 奉 换 不 会 造成 什么 问题 ， 所 以 形式 上 像 下 面 这样 使 用 原型 继承 即 可 。 


// 对 原型 继承 的 形式 上 的 理解 
类 名 .prototype. 方法 名 = function (方法 的 参数 ) { 方法 体 } 










































































国 5.16.1 原型 链 | 
原型 继承 支持 一 种 称 为 原型 链 的 功能 。 使 用 原型 链 有 两 个 前 提 。 
@ 所 有 的 函数 ( 对 象 ) 都 具有 名 为 prototype 的 属性 ( prototype 属性 所 引用 的 对 象 则 称 为 prototype 对 象 )。 
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@ 所 有 的 对 象 都 含有 一 个 ( 隐藏 的 ) 链接 ， 用 以 指向 在 对 象 生成 过 程 中 所 使 用 的 构造 函数 ( Function 对 和 象 ) 
的 prototype 对 象 。 


在 ECMAScript 的 标准 中 ，prototype 属性 被 称 为 explicit prototype property， 而 隐藏 的 链接 被 称 为 
implicit prototype link。 本 书 将 前 者 称 为 “prototype 引用 ”， 而 将 后 者 称 为 “ 隐 式 链接 ”。 

在 满足 了 以 上 前 提 的 情况 下 ， 原 型 链 将 以 以 下 方式 运行 。 

对 象 对 属性 的 读 取 ( 以 及 对 方法 的 调用 ) 是 按照 以 下 顺序 查找 的 。 

CD 对 象 自身 的 属性 。 

@) 隐 式 链接 所 引用 的 对 象 ( 即 构造 函数 的 prototype 对 象 ) 的 属性 。 

@@) 第 2 项 中 的 对 象 的 隐 式 链接 所 引用 的 对 象 的 属性 。 

僵 反复 按 第 3 项 的 规则 查找 直至 全 部 查找 完毕 ( 查找 的 终点 是 Object.prototype 对 象 )。 


如 果 不 考 虑 原型 链 这 一 术语 的 话 ， 会 发 现 其 本 质 其 实 就 是 对 隐 式 链接 的 属性 继承 。 由 于 隐 式 链接 所 
引用 的 对 象 是 构造 函数 的 prototype 对 象 ， 因 此 事实 上 这 就 是 在 前 面 小 节 中 所 说 的 “类 名 .prototype. 方法 
名 ”的 继承 方式 。 此 外 需要 注意 ， 由 对 象 字面 量 生成 的 对 象 的 隐 式 链接 引用 的 是 Object.prototype。 

而 在 写 和 对象 的 属性 的 时 候 ， 则 是 按照 以 下 顺序 进行 属性 查找 的 。 这 时 的 属性 改写 中 不 会 发 生 继承 。 

中 对 象 自身 的 属性 

请 注意 ， 在 读 取 和 写 入 的 时 候 ， 继 承 的 执行 方式 是 不 同 的 ， 不 过 这 种 不 对 称 性 其 实 也 是 理所当然 的 。 
根据 原型 链 的 原理 ， 所 有 的 对 象 最 终 都 会 具有 一 个 引用 了 Object.prototype 对 象 的 隐 式 链接 。 如 果 对 属性 
的 改写 会 影响 到 上 一 级 对 象 的 话 ， 那 么 即使 仅仅 是 改写 了 某 一 个 对 象 的 toString 方法 ， 也 会 对 其 他 所 有 
对 象 造成 影响 。 这 样 一 来 就 很 难 控制 程序 了 。 

另 一 方面 ， 由 于 在 读 取 中 会 发 生 继承 ， 所 以 若是 改写 了 某 个 隐 式 链接 的 toString 方法， 就 能 够 在 原 
型 继承 了 该 对 象 的 对 象 中 使 用 这 一 新 的 实现 。 这 种 对 实现 的 继承 或 者 说 是 对 操作 的 继承 的 做 法 ， 正 是 对 
面向 对 象 技术 的 一 种 灵活 运用 。 

下 面 要 介绍 的 术语 可 能 会 造成 一 些 理解 上 的 混乱 :“ 隐 式 链接 ”所 引用 的 对 象 被 称 为 原型 对 象 ( 请 参 
见 专栏 )。 在 接受 了 这 个 术语 之 后 ， 对 于 原型 继承 的 说 明 就 变 得 非常 简单 了 。 只 需要 通过 “在 读 取 属 性 
时 ， 对 属性 对 象 的 属性 进行 继承 ”这 样 一 句 话 就 可 以 完成 定义 。 

下 面 是 对 原型 链 的 原理 的 图 示 ( 图 5.9 )。 请 注意 ， 变 量 和 引用 的 对 象 是 分 开 写 的 。 这 里 要 再 次 提醒 






























































































































































































































































































































































的 是 ， 对 象 自身 是 没有 名 字 的 。 如 果 记 不 清 了 ， 请 重新 回顾 5.2.3 节 中 的 说 明 。 
‖ 图 5.。 原型 链 的 原理 
Object 
条 
对 象 引 对 象 
MyClass PrototyPe mm > foo2:'z' 
下 Object.prototype.foo2='Z 全 
对 象 引 对 象 9 
prototype mmm foot:y 9 
MyClass.prototype.foo1=y ww | 内 
wi" Var obj=new MyClass() O 
KD kL. 
I 对 象 
Eo Wem OO: § 
i™ob),fool 加 "eT obj.foo0='xX' 机 
um Obj.foo2 met, rn S 
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压 5.16.2 原型 链 的 具体 示例 | 
接 下 来 ， 将 说 明 原型 链 的 具体 示例 以 及 其 内 部 的 执行 方式 。 首 先 请 看 图 5.10。 
图 5.10 原型 链 的 具体 示例 ( 属性 读 取 ) 


js> function MyClass() { this.x me In MyClass } 





js> var obj = new MyClass();  // 通过 MyClass 构造 函数 生成 对 象 
ISS orinel(obi DE 
x in MyClass 


js Orinel(oB ez) // 对 象 obj 中 没有 属性 = 


undefined 


// Function 对 象 具有 一 个 隐 式 的 prototype 属性 
js> MyClass.prototype.z = 'z in MyClass.prototype'; 
// 在 构造 函数 prototype 对 象 新 增 属性 z 

ES Nouinie (en es // 这 里 的 obj .z 访问 的 是 构造 函数 pzototype 对 象 的 属性 

z in MyClass.prototype 

在 读 取 对 象 obj 的 属性 的 时 候 ， 将 首先 查找 自身 的 属性 。 如 果 没 有 找到 ， 则 会 进一步 查找 对 象 
MyClass 的 prototype 对 象 的 属性 。 这 就 是 原型 链 的 基本 原理 。 这 样 一 来 ， 在 通过 MyClass 构造 函数 生成 
的 对 象 之 间 就 实现 了 对 MyClass.prototype 对 象 的 属性 的 共享 。 

这 种 共享 用 面向 对 象 的 术语 来 说 就 是 继承 。 通 过 继承 可 以 生成 具有 同样 执行 方式 的 对 象 。 不 过 请 注 
意 ， 在 上 面 的 代码 中 ， 如 果 修 改 MyClass.prototype， 已 经 生成 的 对 象 也 会 发 生 相应 的 变化 。 

而 属性 的 写 人 与 删除 则 与 原型 链 无 关 。 请 看 图 5.11、 图 5.12 和 图 5.13。 


5.11 原型 链 的 具体 示例 ( 属性 写 入 ) 


js> function MyClass() { this.x = 'x in MyClass'; } 
js> MyClass.prototype.y = 'y in MyClass.prototype'; 
































js> var obj = new MyClass();  // 通过 MyClass 构造 函数 来 生成 对 象 
js> print (obj .y); // 通过 原型 链 读 取 属 性 
y in MyClass.prototype 


js> obj.y = 'ovezrtziade' ; // 在 对 象 obj 中 新 增 直接 属性 y 
js> print (obj .y); // 读 取 直 接 属性 
roeverride' 


js> var obj2 = new MyClass ()，; 
Te oss (ee // 在 其 他 的 对 象 中 ， 属 性 y 不 会 发 生变 化 
y in MyClass.prototype 





5.12 原型 链 的 具体 示例 ( 属性 删除 ) ( 接 图 5.11 ) 
js> delete obj.y; // 删除 属性 y 


js> print (obj .y); // 该 直接 属性 不 存在 ， 因 此 将 搜索 原型 链 
y in MyClass.prototype 


js> delete obj.y; // 虽然 delete 运算 的 值 为 true 
teus 

js> print (obj .y); // 但 无 法 delete 原型 链 中 的 属性 
y in MyClass.prototype 
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| 图 5.13 图 5.11 与 图 5.12 的 执行 方式 


MyClass 
由 
对 引 


寺 象 对 象 
prototype FE yy in Myclass.prototype 






























































var obj=new Myclass() 全 
3 ; 
对 象 S 
x:'x in Myclass’ OO 
”” 读 取 2 RA 由 
OPDjy aa 有 量 nn 
写 入 


obj.y='override 




















引 
; 对 象 
b = 
oy x:x in Myclass' 


y: Override 


删除 | 
delete obj.y 


对 象 


X: Xin Myclass’ 
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在 图 5.10 中 ， 如 果 没 能 找到 MyClass.prototype 对 象 的 属性 的 话 ， 则 会 继续 搜索 原型 链 。 

之 后 将 会 在 生成 了 MyClass.prototype 对 象 的 构造 函数 的 prototype 对 象 的 属性 中 搜索 。 在 默认 情 
况 下 ，MyClass.prototype 对 象 的 构造 函数 是 一 个 Object 对 象 。 因 此 ， 将 会 查找 Objectprototype 对 象 
的 属性 。 可 以 通过 向 Objectprototype 对 象 增 加 新 的 属性 来 验证 这 一 操作 。 不 过 如 果 在 实际 的 代码 中 修 
改 Object.prototype 的 话 ， 将 会 对 程序 造成 巨大 的 影响 ， 所 以 并 不 推荐 这 么 做 。toString 方法 是 原本 就 存 
在 于 Objectprototype 对 象 中 的 一 个 属性 ， 可 以 通过 对 它 调用 来 验证 上 面 的 说 法 (图 5.14)。 可 以 通过 
hasOwnProperty 方法 来 确认 一 个 属性 是 否 直接 属于 某 个 对 象 。 需 要 注意 的 是 ，toString 并 不 是 Object 对 象 
所 具有 的 属性 ， 而 是 Object.prototype 对 象 的 属性 。 


图 5.14 对 是 否 存 在 一 个 指向 Object.prototype 的 隐 式 链接 的 确认 ( 接 图 5.10 ) 


js> obj.tostring(); // 检验 是 否 可 以 对 对 象 obj 调用 tostring 方法 
[object Object] 































































































js> obj.hasOwnProperty ('tostring'); // 在 对 象 obj 中 不 存在 tostring 方法 
false 


js> Object.prototype.hasOwnProperty('toString'); // 在 Object.prototype 对 象 中 存在 tostring 方法 
CEUe 


js> Object .hasOwnProperty('toString'); // 注意 ,在 Object 中 并 不 存在 toString 方法 
false 


借助 原型 继承， 在 JavaScript 中 实现 了 类 似 于 Java 与 C++ 等 基于 类 的 程序 设计 语言 中 的 类 型 层级 的 机 制 。 


国 5.16.4 对 于 原型 链 的 常见 误解 以 及 _proto_ 属 性 | 
对 于 原型 链 ， 有 以 下 常见 的 错误 理解 。 
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@ 在 搜索 了 自身 的 属性 之 后 ， 将 会 查找 构造 函数 自身 的 属性 ( 对 于 图 5.10 中 的 例子 来 说 ， 指 的 就 是 查找 
MyClass.z )。 

@ 在 搜索 了 自身 的 属性 之 后 ， 将 查找 对 象 的 prototype 对 象 的 属性 ( 对 于 图 5.10 中 的 例子 来 说 ， 指 的 就 是 查 
找 obj.prototype.z )。 


原型 链 最 终 是 通过 “ 隐 式 链接 ”连接 而 成 的 。 在 一 些 JavaScript 实现 中 具有 _proto_ 这样 一 个 属性 ， 
它 指向 了 隐 式 链接 所 引用 的 对 象 。 
不 过 在 ECMAScript 的 标准 中 并 没有 _proto_ 属 性， 所 以 是 否 可 以 使 用 


国 5.16.5 原型 对 象 lL 


对 象 的 隐 式 链接 (_proto_ 属 性 ) 所 引用 的 对 象 称 为 原型 对 象 。 下 面 的 代码 将 说 明 这 种 命名 方式 可 能 
会 引起 的 问题 。 


function Myclass() {} 
var obj = new MyClass (); 


MyClass.prototype 与 obj._ proto 引用 了 同一 个 对 象 ， 即 对 象 obj 的 原型 对 象 。 不 过 容易 弄 错 的 一 点 
是 ，MyClass.prototype 的 引用 对 象 并 不 是 MyClass 的 原型 对 象 。( 那么 MyClass 对 象 的 原型 对 象 是 什么 
呢 ? 答案 是 Function.prototype 所 引用 的 对 象 。 更 为 详细 的 内 容 ， 请 参见 6.6.1 节 )。 

在 5.2.3 节 中 ， 为 方便 起 见 ， 我们 将 变量 obj 所 引用 的 对 象 称 作 “ 对 象 obj”"。 但 本 节 并 没有 使 用 
“MyClass.prototype 对 象 ”这 样 的 称 法 。 因 为 这 样 的 话 将 会 使 术语 的 使 用 变 得 更 加 混乱 。 有 时 会 将 对 象 以 
对 其 引用 的 变量 来 命名 ， 这 种 做 法 将 会 使 本 应 不 具有 名 字 对 象 看 起 来 好 像 是 有 名 字 似 的 ， 从 而 导致 表述 
上 的 混乱 。 
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原型 链 之 所 以 不 容易 被 理解 ， 其 重要 原因 之 一 是 由 于 隐 式 链接 的 存在 。 在 之 前 的 小 节 中 所 介绍 的 _ 
proto_ 属性 是 非 通用 的 增强 功能 ， 因 此 ， 实 际 上 并 没有 一 种 可 以 从 一 个 对 象 追 溯 至 其 原型 对 象 的 官方 方 
法 。 这 也 是 为 什么 隐 式 链接 会 被 称 为 隐 式 链接 。 

这 种 情况 在 ECMAScript 第 5 版 中 得 到 了 改善 。 在 ECMAScript 第 5 版 中 有 getPrototypeOf 这 样 一 个 
方法 ， 它 将 会 返回 “ 隐 式 链接 ”所 引用 的 对 象 。 也 就 是 说 ， 在 官方 的 标准 中 出 现 了 一 个 和 _proto_ 属性 这 
非 通用 功能 的 作用 相同 的 方法 。 代 码 清单 5.12 介绍 了 从 一 个 对 象 中 直接 获取 其 原型 对 象 的 具体 方法 。 


| 代码 清单 5.12 ”获取 原型 对 象 的 三 种 方法 


// 前 提 条 件 

function MyClass() {} 

Var Proto = MyClass .prototype; 

Var obj = new MyClass();  // 对 象 obj 的 原型 对 象 是 对 象 proto 


// 通过 对 象 实例 取得 ( ECMASCript 第 5 版 中 最 直接 的 方法 ) 
Var Proto = Object.getPrototypeof (obj); 















































该 属性 还 要 取决 于 具体 的 实现 。 
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// 通过 对 象 实例 取得 ( 使 用 _proto_ 属性 这 一 增强 功能 


warepiouor sob:ose 


// 通过 对 象 实例 以 及 其 构造 函数 取得 ( 无 法 确保 总 是 有 效 ) 

var prnotor op oonste utor rotEoE ve 

虽然 _proto_ 属 性 是 一 种 非 通 用 的 功能 ， 不 过 由 于 它 更 为 直观 且 易 于 理解 ， 因 此 接 下 来 ,我 们 还 
是 以 它 为 基础 进行 说 明 。 如 果 一 定 要 遵循 标准 的 话 ， 只 需 将 使 用 了 _proto_ 的 代码 部 分 替换 为 Object. 
getPrototypeOf 即 可 。 
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| 5.17 | 对 象 与 数据 类 型 


对 于 基于 类 的 程序 设计 语言 ， 对 象 的 类 型 是 由 作为 模型 的 类 以 及 其 对 其 进行 实现 的 接口 共同 决定 的 。 
而 在 JavaScript 中 ， 不 存在 这 种 意义 上 的 对 象 类 型 的 概念 。 这 是 因为 在 JavaScript 中 根本 就 不 存在 类 与 接 
口 的 概念 。 不 过 从 原理 上 来 说 ， 对 象 类 型 的 概念 与 对 象 的 操作 这 一 概念 存在 不 少 共性 ， 由 此 ， 也 可 以 认 
为 在 JavaScript 中 其 实 是 存在 对 象 类 型 的 概念 的 。 

首先 需要 说 明 的 是 如 何 判 断 明确 的 对 象 类 型 ， 也 就 是 判断 基本 类 型 。 这 种 判断 可 以 通过 typeof 运算 
符 实现 。 由 于 已 经 介绍 过 相关 内 容 ， 因 此 在 此 不 再 举例 说 明 。 

对 于 Object 类 型 ，typeof 运算 的 结果 是 字符 串 值 "object"。 

JavaScript 的 语言 规范 没有 对 Object 类 型 进一步 细 分 。 开 发 者 可 以 根据 自己 的 需要 ， 设 计 出 任意 的 具 
有 共同 执行 方式 的 对 象 。 面 向 对 象 技术 的 核心 思想 之 一 就 是 要 考虑 对 象 的 操作 ， 所 以 在 面向 对 象 程序 设 
计 的 过 程 中 必须 重视 这 个 问题 。 


国 5.17.1 数据 类 型 判定 ( constructor 属性 ) | 


可 以 通过 使 用 对 象 的 constructor 属性 来 从 对 象 处 获取 其 构造 函数 。 如 果 能 获知 对 象 的 构造 函数 ， 也 
就 能 够 知道 该 对 象 的 原型 继承 情况 了 ， 于 是 便 可 以 了 解 这 个 对 象 的 一 部 分 操作 。 昌 然 JavaScript 并 不 适合 
以 基于 类 的 观点 来 分 析 ， 不 过 可 以 姑且 认为 图 5.15 中 代码 的 含义 是 对 对 象 的 类 进行 确认 。 


| 图 5.15 ”通过 constructor 属性 判断 类 型 的 例子 


js> var d = new Date() ， 
js> d.constzuctor; // 对 象 d 的 constructor 属性 引用 了 Date 
function Date() { 

[native codel] 
b 


Se on = 
js> arr.constructor; // 对 象 arr 的 constructor 属性 引用 了 Arry 
function Array() { 


} 
Te var op = 
js> obj.constructor; // 通过 字面 量 生成 的 对 象 的 constructor 属性 引用 了 object 
function Object() { 
[native codel] 





































































































[native codel] 


国 5.17.2 ”constructor 属性 的 注意 点 | 


constructor 属性 不 是 对 象 的 直接 属性 ， 而 是 通过 原型 链 查 找到 的 属性 。 因 此 ， 下 面 这 有 段 模拟 了 派生 继承 
的 代码 ， 实 现 了 相当 于 基 类 Base 的 功能 。 不 过 需要 注意 的 是 ， 它 并 不 一 定 总 能 按照 设想 的 方式 执行 功能 。 
js> function Derived() {} // 该 构造 函数 相当 于 派生 类 


js> function Base() {} // 该 构造 函数 相当 于 基 类 
js> Derived.prototype = new Base(); 


UI 














nl 











js> var obj = new Derived(); // 通过 Derived 构造 函数 生成 object 对 象 
js> obj.constructor; // 引用 了 对 象 obj 的 constructor 属性 引用 了 Base 
function Base() { 


} 
与 obj.constructor 的 原型 链 相连 的 实体 是 Derived.prototype.constructor。 所 以 只 需 像 下 面 这 样 对 其 进 
行 显 式 的 修改 ， 就 可 以 使 这 类 派生 继承 获得 期 望 的 结果 。 
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js> Derived.prototype.constructor = Derived; 


js> obj .constzructor; // 对 象 obj 的 constructor 属性 引用 了 Derived 
function Derived() { 





四 | 5.17.3 ”数据 类 型 判定 ( instance 运算 与 isPrototypeOf 方法 ) | 


虽然 也 可 以 通过 constructor 属性 来 判断 对 象 类 型 ， 不 过 更 为 常见 的 做 法 是 使 用 instanceof 运算 来 进行 
判断 。 具 体 方法 为 在 运算 符 左 侧 书 写 对 象 引 用 ， 在 右 侧 书写 相应 的 构造 子 数 。 如 果 对 象 是 通过 右 侧 的 构 
造 函 数 生 成 的 ， 则 运算 结果 为 真 。 对 于 通过 原型 链 进 行 派生 继承 的 情况 ，instanceof 运算 也 是 有 效 的 。 

图 5.16 是 一 个 具体 的 例子 。 


5.16 通过 instanceof 运算 来 判断 类 型 的 例子 


js> var d = new Date(); // 通过 Date 构造 函数 生成 对 象 Q 
js> Q instanceof Date; 

下 下 让 人 

js> d instanceof Object; 

true 


















































js> function Derived() {} // 该 构造 函数 相当 于 派生 类 
js> function Base() {} // 该 构造 函数 相当 于 基 类 


js> Derived.prototype = new Base(); 


js> var obj = new Derived() ; 
js> obj instanceof Derived; 
true 

js> obj instanceof Base; 
true 

js> obj instanceof Object; 
EU 


可 以 通过 Object 类 的 isPrototypeOf 方法 来 确认 原型 对 象 ， 该 方法 将 搜索 原型 链 。 图 5.17 是 个 具体 例子 。 
5.17 isPrototypeOf 方法 的 例子 ( 接 图 5.16 ) 


























js> Derived.prototype.isPrototypeOf (obj); 
EUe 

js> Base.prototype,isPrototypeOf (obj); 
ET 

js> Object .prototype.isPrototypeOf (obj); 
EUe 





国 5.17.4 数据 类 型 判定 ( 鸭子 类 型 ) | 

如 果 类 与 对 象 实例 ) 之 间 只 是 静态 关系 ， 只 需 通过 instanceof 运算 就 能 够 解决 所 有 的 对 象 类 型 判断 
间 题 。 然 而 ， 在 JavaScript 中 ， 对 象 是 一 种 动态 的 概念 。 例 如 ， 像 下 面 这 样 ， 为 生成 的 对 象 新 增 属性 或 不 
通过 构造 函数 生成 对 象 ， 都 很 常见 。 


js> var obj = {} // 生成 空 对 象 
sop dn Eunecelon( orme on // 新 增 属性 





// 不 通过 构造 函数 生成 对 象 


Svar ESRESEEONEESN NO 全 4 人 SITE NE 二 ) 


在 上 面 这 个 对 象 中 有 一 个 名 为 doit 的 方法 。 对 象 所 拥有 的 方法 是 用 于 描述 对 象 操作 的 重要 指标 ， 然 


























而 一 个 方法 是 否 存 在 却 是 无 法 通过 constructor 属性 或 instanceof 运算 来 判断 的 。 
判断 在 对 象 中 含有 哪些 属性 ， 是 比 instanceof 运算 更 为 普遍 的 类 型 判断 方式 。 这 种 直接 分 析 对 象 的 操 
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作 以 判断 其 类 型 的 方法 俗称 为 鸭子 类 型 判断 。 

ip 运算 是 一 种 可 以 用 于 判断 鸭子 类 型 的 方法 。in 运算 需要 在 运算 符 左 侧 书 写 属性 名 字符 串 ， 在 右 侧 
指定 对 象 的 引用 。 如 果 对 象 拥有 所 指定 的 属性 ， 运 算 结果 即 为 真 。 对 于 通过 原型 链 继承 的 属性 ， 也 能 
通过 这 一 方式 判断 。 






































J Mare Go "roe eve eal Mn ors tome } 
ES Sou dn Oled)? // 对 象 obj 中 含有 doit 属性 ， 所 以 结果 为 真 


true 


js> 'toSstring' in obj; // 从 object 中 继承 了 tostring 属性 ， 所 以 结果 为 真 


TEE 





国 5.17.5 属性 的 枚 举 ( 原型 继承 的 相关 问题 ) | 


5.8.3 节 和 5.9.1 节 已 经 介绍 了 通过 for in 语句 以 及 for each in 语句 来 枚 举 属性 。 

此 外 ， 前 面 的 小 节 还 介绍 了 通过 in 运算 符 来 判断 属性 是 否 存 在 。for in 语句 、for each in 语句 以 及 计 
语句 都 会 对 原型 链 进行 搜索 。 对 于 类 型 判断 来 说 ， 搜 索 原型 链 是 一 种 方便 的 做 法 。 不 过 ， 我 们 有 时 仪 希 
望 对 直接 属性 是 否 存在 进行 判断 ， 并 不 需要 对 原型 链 进 行 搜 索 。 这 时 ， 可 以 使 用 hasOwnProperty 方法 。 
下 面 是 个 具体 例子 。 

// 仅 列举 直接 属性 的 代码 示例 


ora ev nee 
if (obj.hasOwnProperty (key)) { 
print (key); 


























} 


5.18 节 中 的 keys 方法 和 getOwnPropertyNames 方法 会 返回 一 个 数组 ， 它 是 由 作为 参数 传递 而 来 的 对 
象 的 直接 属性 的 名 称 组 成 的 。 其 中 key 方法 仅 返 回 enumerable 属性 为 真 的 属性 ， 它 得 到 的 结果 与 通过 for 
in 语句 中 的 hasOwnProperty 方法 判断 得 到 的 是 相同 的 。 而 getOwnPropertyNames 方法 则 是 在 返回 属性 名 
时 无 视 enumerable 属性 。 

下 面 是 Object 类 的 keys 方法 与 getOwnPropertyNames 方法 的 具体 例子 。 


Svareobi = 

js> Object .keys (obj); 

LY | 

js> Object .getOwnPropertyNames (obj ) ; 
[sw5 | 


// 数组 也 是 一 种 对 象 ， 详 细 内 容 请 参见 7.1 节 
J var ar = bam 

js> Object .keys (arr); 

Pao nm] 

js> Object .getOwnpPropertyNames (arr); 
Eengthy. On 本 区 | 






























































// 对 object .prototype 对 象 的 考察 

js> Object .keys (Object .prototype); 

[] 

js> Object .getOwnPropertyNames (Object .prototype); 

Weonstruetory eeosouraen ostrina Lr utovocaleste ng valueor uate 
vumwatenu asoOn nen oy eo roverey i ml dtmeeeteern 
EeeESE We eelaneen ee Ws WW lorevadloe ee WW) 














顺带 一 提 ， 对 于 属性 的 enumerable 属性 可 以 通过 propertyIsEnumerable 方法 来 判断 。 
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| 5.18 | ECMAScript 第 5 版 中 的 Object 类 


ECMAScript 第 5 版 中 Object 类 的 create 方法 ， 是 除了 对 象 字 面 量 与 new 表达 式 之 外 的 第 三 种 官方 的 
对 象 生成 方法 。 它 的 第 一 个 参数 需要 一 个 原型 对 象 ， 而 第 二 个 参数 需要 一 个 属性 对 象 ( 之 后 将 作 说 明 )。 

如 果 将 一 个 null 作为 原型 对 象 传递 给 create 方法 ， 则 会 生成 一 个 没有 进行 原型 继承 的 对 象 。 请 看 下 
面 的 例子 。 




















// 未 原型 继承 于 object 类 的 对 象 


ss> var oo obleercaereabe (nt 

js> print (Object .getPrototypeOf (obj)); 

ml 

js> "toString in obj; // 对 没有 继承 tostring 进行 确认 
false 


可 以 用 下 面 的 代码 来 实现 与 通过 对 象 字面 量 生成 对 象 相 同 的 效果 。 








js> var obj = Object.create(Object.prototype); // 与 var obj = {} 等 价 


通过 使 用 Object'create 方法 ， 可 以 在 代码 中 更 为 直观 地 表述 原型 继承 。 代 码 清单 5.13 是 一 个 具体 的 









































例子 。 
| 代码 清单 5.13 ”Object.create 方法 的 示例 


function MyClass() {} 

var BEGET // 原型 对 象 
MyClass. prototype = Proto; 

var obj = new MyClass() 


与 下 面 的 代码 等 价 
ar eote (2 // 原型 对 象 


var obj = Object.creat (Proto); 


// 运行 代码 清单 5.13 的 示例 Ss 
js> print (obj .x, obj.y); // 确认 属性 已 被 原型 继承 


之 到 





国 5.18.1 属性 对 条 | 


create 方法 的 第 二 个 参数 是 一 个 关联 数组 ， 其 键 为 属性 名 ， 其 值 为 属性 描述 符 ( 属性 对 象 )。 属 性 描 
述 符 指 的 是 在 表 5.1 中 的 由 属性 的 属性 组 成 的 关联 数组 。 

下 面 是 个 具体 例子 。 其 中 属性 值 是 通过 value 属性 指定 的 。 大 部 分 属性 的 默认 值 是 false， 在 这 个 例 
子 中 会 将 它们 显 式 地 指定 为 true。 
























































TE Ve dels = 0 齐 二 
与 下 面 的 代码 等 价 
js> var obj = Object.create (Object .prototype, 
{ x: {value:2, writable:true, enumerable:true, configurable:true}, 
y: {value:3, writable:true, enumerable:true, configurable:true} }); 


可 以 通过 Object.create 来 显 式 地 指定 属性 的 属性 。 表 5.4 列 出 了 与 属性 的 属性 相关 的 方法 。 
表 5.4 与 Object 类 的 属性 的 属性 有 关 的 方法 ( 表 5.1 的 摘 选 ) 






























































defineProperty(o, p, attributes) 寸 象 o 增加 /更 新 具有 特定 信息 的 属性 p 
defineProperties(o, properties) 句 对 象 o 增加 /更 新 具有 特定 信息 的 属性 
getOwnPropertyDescriptor(o, p) 返回 对 象 o 的 直接 属性 p 的 信息 ( 值 与 属性 ) 
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下 面 是 表 5.4 中 的 方法 的 一 些 具体 示例 。 


js> var obj = Object.create (Object.prototype, { x:{value:2} }); 


// 除了 显 式 指定 的 属性 ， 其 他 的 值 都 为 false ( value 的 默认 值 为 undefined ) 
js> Object .getOwnPropertyDescriptor(obj, 'x'); 
({value:2, writable:false, enumerable:false, configurable, false}) 


// 新 增 属性 y 


js> Object.defineProperty(obj, 'y', {value:3, enumerable:true}); 


js> Object .getOwnPropertyDescriptor (obj, 'y'); // 确认 
({value:3， writable:false, enumerable:true, configurable, false}) 


// 新 增 属性 z 
js> Object .defineProperties (obj, { z:{value:function(){ print('z called'); }, 
enumerable:true } }); 


js Object.getOwnPropertyDescriptor(obj, '2'); // 确认 
({value: (function () {print("z called");}), writable:false, enumerable:true, 
configurable:false}) 


// 确认 enumerable 属性 ( 也 可 以 通过 object .keys 实现 ) 
for (va Key mn oD l 
print (key); 











如 果 属 性 的 configurable 属性 为 tre， 则 可 以 更 改 包括 值 在 内 的 所 有 属性 ， 反 之 如 果 为 false， 则 不 
能 。 由 于 此 时 configurable 属性 也 无 法 被 更 改 ， 因 此 事实 上 如 果 该 属性 为 false， 则 将 无 法 进行 任何 更 改 。 


故 5.18.2 访问 器 的 属性 | 


只 要 将 get 属性 与 set 属性 指定 为 相应 的 函数 ， 就 能 够 定义 一 个 只 能 够 通过 访问 器 getter 和 setter 来 
访问 值 的 属性 。 访 问 需 与 value 属性 是 相互 排斥 的 ， 也 就 是 说 ， 如 果 指 定 了 value 属性 的 值 ， 访 问 器 ( 同 
时 包括 get 和 set ) 就 会 失效 ; 反之 ， 如 果 指 定 了 访问 器 ( get 或 set 中 的 某 一 个 )，value 属性 就 会 失效 。 

对 get 属性 需要 指定 一 个 有 返回 值 的 函数 ， 对 于 set 属性 则 需要 指定 一 个 能 够 接受 一 个 参数 并 在 内 部 
变更 状态 的 函数 。 从 内 部 来 看 ， 将 属性 作为 右 值 访问 时 使 用 的 是 getter 函数 ， 而 将 属性 作为 左 值 以 进行 
赋值 时 使 用 的 是 setter 函数 。 根 据 语言 规则 ， 是 可 以 把 提供 其 他 功能 的 函数 指定 给 get 属性 的 ， 不 过 那样 
就 没有 意义 了 ， 所 以 还 是 应 该 使 用 功能 相符 的 函数 。 图 5.18 中 的 代码 验证 了 访问 器 的 功能 。 只 要 能 写 出 
正确 的 getter 访问 需 函数， 就 能 以 此 为 基础 设计 出 一 个 不 可 变 对 象 。 
















































































5.18 ”对 访问 器 的 功能 的 验证 


js> var obj = Object .create (Object .prototype, 
{ x:{ get:function(){ print('get called');} 
set:function(){ print('set called');} 
} 
OB 


Ts Printl(opi x // 当 要 读 取 属性 时 ， 将 会 调用 gettez 函数 
get called 
undefined // 返回 getter 函数 的 返回 值 ( 由 于 上 面 的 代码 中 没有 return 任何 值 ， 因 此 结果 为 undefined 值 


js> obj.x ; // 在 写 入 属性 值 时 将 调用 setter 函数 
set called 


ee ue (ee // 如 上 所 示 ， 此 处 的 setter 函数 不 会 对 属性 做 任何 更 改 
get called 
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访问 器 函数 也 可 以 通过 对 象 字面 量 来 表述 。 下 面 代码 中 的 对 象 和 图 5.18 中 的 是 一 样 的 。 


var obj = { get x() { print('get called'); }, 
SEE pr se ocala 


getter 函数 与 setter 函数 中 的 this 引用 指向 的 是 当前 对 象 ， 不 过 下 面 这 样 的 代码 是 无 法 运行 的 。 这 是 
因为 其 中 的 每 个 访问 器 函数 都 会 不 断 调用 访问 器 函数 。 
// 无 法 运行 ( 有 无 限 循环 的 致命 错误 ) 




















var obj = Object.ctreate (Object .prototype, 
So ee uotlon( ee 
Set tunetion( En ET 


} 
下 面 的 代码 虽然 能 够 运行 ， 但 还 是 有 些 问 题 。 
// 使 用 了 隐藏 的 属性 _x 的 访问 器 的 例子 ( 姑且 算是 能 够 运行 ) 











var obj = Object.create (Object .prototype, 
x gt unctlon() recun ch 
局 SR 
x:{ writable:true } 








这 段 代码 的 问题 之 处 在 于 属性 x 是 可 以 从 外 部 改写 的 。 如 果 通 过 代码 规范 ， 规 定 不 允许 从 外 部 直接 
访问 这 一 属性 的 话 倒是 可 以 解决 问题 ， 不 过 这 种 规范 通常 很 有 可 能 会 被 打破 。 不 借助 于 规范 的 更 恰当 的 
方法 是 通过 闭 包 来 隐藏 这 个 变量 。 之 后 的 6.7.5 节 将 对 此 进行 说 明 。 代 码 清单 5.14 是 一 个 具体 示例 。 

有 代码 清单 5.14 ” 闭 包 与 访问 器 相 结合 
// 用 于 生成 对 象 的 函数 ( 参见 5.7.1 节 ) 


function createObject() { 


We eo // 变量 名 也 可 以 用 x， 不 过 那样 容易 产生 混乱 ， 所 以 这 里 仍 使 用 _x 
// 返回 一 个 定义 了 访问 器 的 对 象 


return { get x() { return x; }, 
see (0 


外 
























































// 调用 代码 清单 5.14 中 的 方法 的 示例 
js> var obj = ctreateobject(); // 生成 对 象 


I oe // 读 取 ( 在 内 部 调用 getter ) 


0 

SS oD ; // 改写 ( 在 内 部 调用 setter ) 
1 

DSS orel(ob 

gl 


在 代码 清单 5.14 使 用 的 是 对 象 字 面 量 ， 不 过 其 实 也 可 以 通过 使 用 Object.create 以 及 Object. 
defineProperty 方法 来 实现 同样 的 效果 。 
专栏 


其 他 种 类 的 类 型 判断 
ECMAScript 第 5 版 提供 了 Array.isArray 方法 。 建 议 在 判断 数组 类 型 时 使 用 该 方法 。 
本 节 介 绍 了 一 些 判断 类 型 的 方法 ， 而 在 jQuery 或 prototype.js 等 知名 的 库 中 ， 类 型 判断 是 基于 字符 串 
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现 的 。 也 就 是 说 ， 将 会 先 通过 toString 使 对 象 字 符 串 化 ， 之 后 再 对 其 进行 模式 匹配 。 尽 管 不 能 算是 一 种 优美 
的 方式 ， 不 过 这 是 一 种 在 实际 开发 中 切实 可 行 的 库 解决 方案 。 

















5.19 | 标准 对 象 


下 表 ( 表 5.5 ) 是 在 ECMAScript 第 5 版 中 定义 的 标准 内 建 对 象 ( built-in object )。 其 中 的 一 些 对 象 是 
以 类 的 形式 来 表述 的 ， 这 是 因为 将 它们 视 为 类 的 话 将 会 更 易于 理解 。 关 于 如 何 使 用 相关 的 术语 ， 请 参见 
2.5.7 他 


表 5.5 “ECMAScript 第 5 版 中 的 内 建 对 象 



































































































































名 称 说 明 

Object 所 有 对 象 的 基 类 
( 通称 ) 全 局 对 象 该 对 象 的 属性 是 全 局 变量 或 全 局 函数 
String 字符 串 类 

Array 数组 类 
Function 函数 类 

Number 数值 类 

Boolean 布尔 类 

Math 数学 函数 对 象 
Date 日 期 类 

RegExp 正则 表达 式 类 
JSON JSON 解释 器 类 
Error 错误 基 类 
EvalError 求 值 错误 类 
RangeError 越界 错误 类 
ReferenceError 引用 错误 类 
SystaxError 语法 错误 类 
TypeError 类 型 错误 类 
URIError URI 错误 类 














| 5.20 | Object 类 


Object 类 是 JavaScript 中 所 有 的 类 的 基 类 “。 其 名 称 与 作用 都 与 Java 的 Object 类 类 似 , 不 过 其 继承 机 
制 与 Java 不 同 , 采用 了 原型 继承 的 方式 。 

如 下 面 的 具体 示例 所 示 ， 在 Object.prototype 对 象 中 增加 的 属性 能 够 在 任意 对 象 中 进行 读 取 访问 。 不 
过 这 里 仅仅 是 为 了 说 明 而 向 Object.prototype 对 象 新 增 了 属性 ， 实 际 开 发 中 如 无 必要 不 应 该 这 样 做 ， 这 种 
做 法 的 影响 范围 过 于 巨大 ， 容 易 引 发 错误 。 


js> object .prototype.foobar = 'FOOBAR'; // 在 object.prototype 对 象 中 新 增 属性 
FOOBAR 
































js> var d = new Date(); // 可 以 取 任 意 的 对 象 ， 这 里 以 Date 对 象 为 例 
js> d.foobar; // 读 取 foobar 属性 就 能 够 得 到 之 前 的 值 
FOOBAR 


js> ‘'x'.foobar; // 对 于 字符 串 对 象 也 能 够 读 取 foobar 属性 
FOOBAR 


js> (0) .foobar; // 对 于 数值 对 象 也 能 够 读 取 foobar 属性 








中 也 可 以 生成 没有 ( 原型 ) 继承 Object 类 的 对 象 (请 参见 5.18 节 )。 
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FOOBAR 














表 5.6 总 结 了 Object 类 的 函数 以 及 构造 函数 调用 。 


表 5.6 Object 类 的 函 站 加 国 数 调 用 
函数 或 者 构造 函数 






































Object() 生成 Object 实例 
Object(value) 将 参数 value 转换 为 Object 对 象 并 生成 Object 实例 
new Object() 生成 Object 实例 
new Object(value) 将 参数 value 转换 为 Object 对 象 并 生成 Object 实例 


























在 没有 特别 理由 的 情况 下 ， 建 议 通过 字面 量 来 生成 对 象 ， 而 不 要 使 用 Object 类 的 函数 或 构造 函数 
调用 。 
表 5.7 是 Object 类 的 属性 。 可 以 以 形 如 Object.seal(obj) 的 方式 使 用 。 


表 5.7 Object 类 的 属性 









































































































































































































































属性 名 说 明 
create(o, [properties]) 义 对 象 o 为 原型 并 返回 具有 指定 属性 的 实例 
defineProperty(o, p, attributes) 句 对 象 o 增加 /更 新 具有 特定 信息 的 属性 p 
defineProperties(o, properties) 句 对 象 o 增加 /更 新 具有 特定 信息 的 属性 
freeze(o) 参见 5.12 节 
getPrototypeOf(o) 返回 对 象 o 的 原型 对 象 
getOwnPropertyDescriptor(o, p) 返回 对 象 o 的 直接 属性 p 的 信息 ( 值 与 属性 ) 
getOwnPropertyNames(o) 返回 对 象 o 的 直接 属性 名 组 成 的 数组 
isSealed(o) 参见 5.12 节 
isFrozen(o) 参见 5.12 节 
isExtensible(o) 参见 5.12 节 
keys(o) 返回 对 象 o 以 及 继承 的 属性 名 组 成 的 数组 
length 值 为 1 
preventExtensions(o) 参见 5.12 节 
prototype 于 原型 链 
seal(o) 参见 5.12 节 

表 5.8 总 结 了 Object.prototype 对 象 的 属性 。 


性 


表 5.8 Object.prototype 对 和 象 的 属 

































































































































































































































































































































































































































































constructor Objec | 

hasOwnProperty(v) 如 果 字 符 实例 的 直接 属性 名 ， 则 返回 真 

isPrototypeOf(V) 如 果 对 象 v 证 本 型 ， 人 可 真 

propertylsEnumerable(v) 如 果 字 符 串 v 是 实例 中 可 枚 举 的 属性 名 ， 则 返回 真 

toSource!) JavaScript 的 增强 功能 。 其 求 值 结 果 将 返 下 生成 实例 的 字符 串 

toLocaleString() 将 实例 转换 为 与 位 置 相 关 的 字符 串 值 。 一 般 由 开发 者 根据 需要 实现 

toString!() 将 实例 转换 为 字符 串 值 。 一 般 由 开发 者 根据 需要 实现 

unwatch(p) JavaScript 的 增强 功能 。 删 除 属性 p 的 观察 点 

valueOf() 将 实例 转换 为 恰当 的 值 。 如 有 必要 ， 由 开发 者 实现 

watch(p, handle) JavaScript 的 增强 功能 。 对 属性 p 设置 观察 点 ( 一 个 会 在 值 发 生 改 变 时 被 调用 的 函数 ) 
_defineGetter_(p, getter) JavaScript 的 增强 功能 。 对 属性 p 设置 getter 属性 ( *1 ) 

_defineSetter_(p, setter) JavaScript 的 增强 功能 。 对 属性 p 设置 setter 属性 ( *1 ) 

_lookupGetter_(p) JavaScript 的 增强 功能 。 返 回 属性 p 的 getter 属性 ( *1 ) 

_lookupSetter_(p) JavaScript 的 增强 功能 。 返 回 属性 p 的 setter 属性 (*1 ) 

_noSuchMethod_ JavaScript 的 增强 功能 。 如 果 对 对 象 调用 了 不 存在 的 方法 ， 该 挂钩 函数 将 会 被 调用 ( *2 ) 
_proto_ JavaScript 的 增强 功能 。( *3 ) 














*1 参见 5.18 节 
*2 这 个 函数 相当 于 Ruby 中 的 method_missing， 这 么 说 或 许 有 些 读者 就 能 立即 理解 了 
*3 参见 5.16.4 节 
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Object 类 没有 实例 属性 。 关 于 Object 类 的 详细 信息 ， 请 参见 5.12 节 。 






































| 5.21 | 全 局 对 象 

全 局 对 象 相当 于 宿主 对 象 的 根 对 象 。 关 于 宿主 对 象 的 内 容 ， 请 参见 第 1 章 。 可 以 通过 在 最 外 层 代码 
中 使 用 this 引用 来 访问 全 局 对 象 。 
专栏 

对 象 的 兼容 性 





可 以 通过 辅助 性 的 代码 来 解决 属性 之 间 不 兼容 问题 。 在 JavaScript 中 ， 开 发 者 在 之 后 可 以 自由 地 向 标准 
对 象 添加 属性 。 例 如 ， 如 果 希 望 向 String 对 象 添加 一 个 trim 方法 用 以 删除 字符 串 前 后 的 3 















































































































































3 白字 符 ， 可 以 通过 























以 下 方式 实现 。 如 果 trim 方法 已 经 存在 ， 则 不 会 产生 任何 影响 。 关 于 向 String.prototype 


容 ， 请 参见 5.16 














4 
Do 


// 用 以 提高 兼容 性 的 代码 示例 





TE nr orot ym 
Steinman etoe en 


funetloml) 


{ 
return String(this) .replace(/“\s+|\s+$/g, ""); 


入 




















新 增 方法 的 详细 内 








能 够 变更 标 




















准 对 象 的 属性 是 一 回 事 ， 而 是 否 应 该 变更 则 是 另 一 


山中 


异 ， 并 不 能 一 概 而 论 。 
在 表 5.5 中 ， 除 了 全 局 对 象 外 ， 还 有 一 些 被 称 为 Object 或 String 等 的 对 象 。 这 里 对 此 简单 做 一 下 说 
明 。 已 经 反复 强调 过 ， 对 象 自 身 是 不 具有 名 称 的 。 这 一 点 对 于 Object 对 象 也 好 ， 对 于 String 对 象 也 好 ， 














都 是 不 变 的 ， 这 些 对 象 本 身 没有 名 字 ， 只 不 过 是 可 以 通 
对 于 全 局 对 象 而 言 ，JavaScript 

































































有。 这 涉及 对 问题 的 思考 方式 的 差 





过 Object 或 String 这 样 的 名 称 访问 而 已 。 
没有 从 语言 标准 上 规定 其 名 称 。 在 客户 端 JavaScript 中 预先 存在 





一 个 指向 了 全 局 对 象 的 变量 window， 对 此 本 书 的 第 3 部 分 也 会 再 次 说 明 。 因 此 ， 如 同 Object 对 象 以 及 
String 对 象 ， 全 局 对 象 也 被 称 为 window 对 象 "。 不 过 要 注意 window 变量 仅 存在 于 客户 端 JavaScript 中 ， 
在 ECMAScript 的 核心 语言 标准 中 ， 全 局 变量 并 没有 特定 的 引用 名 称 。 因 为 在 当前 这 一 部 分 中 将 仅 说 明 
核心 语言 ， 所 以 就 没有 对 全 局 变量 采用 专门 的 名 称 ， 而 直接 称 其 为 全 局 变量 。 

不 过 由 于 最 外 层 代 码 中 的 this 引用 指向 了 全 局 变量 ， 因 此 只 要 通过 下 面 这 样 的 代码 ， 就 可 以 在 任 
何 环境 中 实现 以 变量 global 对 全 局 变量 的 引用 。 在 客户 端 JavaScript 中 这 并 不 是 必需 的 〈 因 为 已 经 有 了 





window 这 一 变量 


是 一 种 合理 的 做 







































































量 名 称 )， 而 在 包括 服务 器 端 JavaScript 在 内 的 其 他 环境 中 ， 通 过 这 利 


法 。 











方式 可 以 统一 命名 ， 








// 可 以 通过 在 最 外 层 代 码 中 使 用 下 面 的 代码 来 实现 在 整个 程序 中 通过 global 对 全 局 对 象 的 引 


var global 


转 5.21.1 


= Css 


全 局 对 象 与 全 局 变量 


正如 在 5.3 节 中 所 说 ， 全 局 变量 与 全 局 函数 是 全 局 对 象 的 属性 。 也 就 是 说 ，Object 











中 根据 5.2.3 节 说 











或 String 这 些 名 字 也 


明 ， 是 应 该 使 用 对 人 象 window 或 是 对 象 Object 对 象 这 样 的 称 法 的 ， 不 过 在 这 里 由 于 考虑 了 自然 易 用 性 而 对 
术语 使 用 方式 的 一 贯 性 做 了 一 些 妥协 。 
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都 是 全 局 对 象 的 属性 名 。 熟 悉 了 Java 这 样 的 具有 类 型 名 称 的 读者 可 能 会 觉得 奇怪 ， 为 什么 在 JavaScript 
PP 类 型 名 称 都 是 属性 名 ( 变量 名 )， 或 者 说 是 否 在 JavaScript 中 根本 就 没有 类 型 名 称 这 样 的 概念 。 在 前 一 
节 中 提 到 的 变量 名 global 以 及 window 自然 也 都 是 全 局 对 象 的 属性 名 。 乍 一 看 ， 属 性 名 可 以 引用 包含 了 自 
身 的 全 局 对 象 ， 是 一 种 容易 产生 混乱 的 关系 ， 不 过 这 一 点 也 已 经 图 5.4 已 经 做 了 说 明 。 

根据 运行 环境 的 不 同 ， 全 局 对 象 中 含有 的 属性 也 不 相同 。ECMAScript 第 5 版 规定 的 属性 是 符合 标准 
的 最 小 集 ， 在 通常 情况 下 都 会 具有 更 多 的 属性 。 例 如 ， 对 于 客户 端 JavaScript 的 情况 ，DOM 对 象 是 事先 
存在 的 。 更 为 详细 的 内 容 将 在 本 书 第 3 部 分 说 明 。 

表 5.9 总 结 了 ECMAScript 第 5 版 中 全 局 对 象 的 属性 "。 注 意 ,无 法 对 全 局 对 象 进行 函数 调用 或 构造 函 
数 调 用 。 

表 5.9 ECMAScript 第 5 版 中 全 局 对 象 的 属性 
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属性 名 说 明 
NaN 表示 Not a Number 含义 的 值 
Infinity 表示 无 穷 大 的 值 
undefined 表示 undefined 类 型 的 值 
eval(x) 每 参数 的 字符 串 值 x 作为 JavaScript 代码 求 值 ( 执行 ) 
parselnt(str, radix) 每 字符 串 值 str 转换 为 基数 为 radix 的 整数 值 
parseFloat(str) 插 字 符 串 值 str 转换 为 数值 
isNaN(num) 如 果 数 值 num 是 NaN 的 话 则 返回 真 
ee 如 果 数 值 num 是 三 种 特殊 值 ( NaN 以 及 正 负 无 穷 大 ) 的 话 则 为 真 ， 
isFinite(num) /fp 
否则 为 假 
encodeURI(ur) 乞 字 符 串 值 uri 编码 为 URI 字符 串 值 , 并 返回 其 中 除了 URI 特殊 字 
符 (? 或 & 之 类 ) 以 外 的 部 分 。 
decodeURI(encodedUR]) encodeURI 函数 的 道 向 转换 
encodeURIComponent(uriComponent) 每 字符 串 值 rui 编码 为 URI 字符 串 值 并 返 区 
decodeURIComponent(encodedURIComponent) encodeURIComponent 函数 的 逆向 转换 




















国 5.21.2 Math 对 条 | 


Math 对 象 是 提供 了 数学 函数 等 功能 的 对 象 ， 无 法 对 其 进行 构造 函数 调用 。 用 Java 的 术语 来 说 的 话 ， 
这 就 相当 于 一 个 直接 调用 类 方法 的 工具 类 。 
表 $.10 总 结 了 Math 对 象 的 属性 。 它 们 可 以 以 Math.random0 的 形式 来 使 用 。 


表 5.10 Math 对 象 的 属性 































































































































































































属性 名 说 明 

E 然 对 数 的 底 ( 2.7182818284590452354 ) 
LN2 2 的 自然 对 数 ( 0.6931471805599453 ) 

LN10 10 的 自然 对 数 ( 2.302585092994046 ) 

LOG2E 义 2 为 底 的 E 的 对 数 ( 1.44269504088899634 ) 
LOG10E 义 10 为 底 的 E 的 对 数 ( 0.4342944819032518 ) 
Pl 昼 周 率 ( 3.1415926535897932 ) 

SQRT1_2 1/2 的 平方 根 ( 0.7071067811865476 ) 

SORT2 2 的 平方 根 ( 1.4142135623730951 ) 

abs(x) x 的 绝对 值 

acos(x) X 的 arccos 

asin(x) Xx 的 arcsin 

atan(X) x 的 arctan 

atan2(y, x) y/x 的 arctan ( 坐标 xy 的 弧度 制 角度 ) 

ceil(x) 大 于 等 于 x 的 最 小 整数 

COS(X) X 的 cos 























中 标准 内 建 对 象 的 名 称 ( Object 或 String 等 ) 也 应 该 是 表 5.5 内 容 的 一 部 分 ， 不 过 在 此 暂且 省 略 。 
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( 续 ) 
exp(x) e 的 x 次 方 
floor(x) 小 于 等 于 x 的 最 大 整数 
log(x) x 的 自然 对 数 ( 底 为 e ) 
max([value0, [value1, value2, ...]]) 参数 中 的 最 大 值 
min([value0, [value1, value2, ...]]) 参数 中 的 最 小 值 
pox(x, y) x 的 y 次 方 
random!() 大 于 等 于 0 小 于 1 的 随机 数 
round(x) Xx 四舍五入 后 的 整数 
sin(x) Xx 的 sin 
sqrt(X) x 的 平方 根 
tan(x) Xx 的 tan 
toSource JavaScript 自 带 的 增强 功能 。 返 回 字 符 串 "Math" 














转 5.21.3 Error 对 和 旬 | 
表 $.11 总 结 了 Error 类 的 函数 以 及 构造 函数 调用 ， 而 表 5.12 则 总 结 了 Error 类 的 属性 。 
表 5.11 Error 类 的 函数 以 及 构造 函数 调用 
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Error(message) 生成 一 个 Error 实例 
new Error(message) 生成 一 个 Error 实例 
Error(message, fileName, lineNumber) JavaScript 自 带 的 增强 功能 。 生 成 一 个 Error 实例 
new Error(message, fileName, lineNumer) JavaScript 自 带 的 增强 功能 。 生 成 一 个 Error 实例 
表 5.12 Error 类 的 属性 
属性 名 说 明 
length 值 为 1 
prototype 于 原型 链 
表 5.13 总 结 了 Error.prototype 对 象 的 属性 。 
表 5.13 ”Error.prototype 对 象 的 属性 
属性 名 说 明 
constructor 对 String 类 对 象 的 引 
message 错误 信息 
表示 错误 类 型 的 字符 串 。 例 如 , 是 EvalError 的 话 则 是 "EvalError"， 
是 RangeError 的 话 则 是 "RangeError 等 
fileName JavaScript 自 带 的 增强 功能 。 发 生 错误 的 文件 名 
lineNumber JavaScript 自 带 的 增强 功能 。 发 生 错误 的 行 号 
stack JavaScript 自 带 的 增强 功能 。 发 生 错 误 时 的 调用 栈 
JavaScript 自 带 的 增强 功能 。 其 求 值 结果 将 返回 生成 了 这 一 Error 
toSource!() 5 己 竹 中 
实例 的 字符 串 
toString() 将 Error 实例 转换 为 字符 串 值 
表 5.5 中 的 其 他 的 错误 类 都 原型 继承 于 Error 类 。 这 一 点 可 以 通过 以 下 的 方式 验证 。 








js> Error.prototype. proto_ Object .prototype; // Error 继承 于 Object 
ETUe 


js> EvalError.prototype. proto === Error.prototype; // EvalError 继承 于 Error 
EUe 
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函数 与 闭 包 






本 章 讲解 函数 与 闭 包 。 借 助 函 数 ， 就 能 够 使 用 子 程序 ， 不 过 仅仅 使 用 函数 还 称 不 上 真正 发 挥 了 
JavaScript 语言 的 力量 。 应 加 深 对 “函数 本 身 也 可 以 是 运算 对 象 ”的 认识 ， 同 时 充分 理解 闭 包 
的 机 制 ， 从 而 跨 入 函数 式 编程 的 世界 。 


6.1 函数 声明 语句 与 匿名 函数 表达 式 


可 以 通过 函数 声明 语句 与 匿名 函数 表达 式 对 函数 进行 声明 。 关 于 声明 的 语法 格式 ， 请 参见 2.4 节 。 
通过 函数 声明 语句 声明 的 函数 在 声明 之 前 就 可 以 调用 ( 参见 之 后 的 6.2.1 节 )。 


6.2 函数 调用 的 分 类 














表 6.1 对 函数 调用 方式 之 间 的 区 别 进 行 了 说 明 。 请 结合 5.14 节 中 的 表 5.3 使 用 。 
表 6.1 函数 调用 的 分 类 
































































































































方法 调 通过 接收 方 对 象 对 函数 进行 调用 ( 包括 apply 与 call 调用 ) 
构造 函数 调 通过 new 表达 式 对 函数 进行 调 
函数 调 以 上 两 种 方式 之 外 的 函数 调 
































请 注意 ， 这 并 不 是 对 函数 本 身 的 分 类 ， 而 是 对 不 同 的 函数 调用 方式 的 分 类 。 也 就 是 说 ， 将 一 个 函数 
称 为 方法 并 不 严 冲 。 更 确切 的 说 法 是 ,该 函数 是 (或 者 不 是 ) 通过 方法 调用 的 方式 使 用 的 。 话 虽 如 此 ， 
过 分 拘泥 于 使 用 严谨 的 术语 定义 也 显得 有 些 死 板 ， 所 以 通常 来 说 ,将 以 方法 调用 的 方式 使 用 的 函数 称 为 
方法 ， 同 理 ， 将 以 构造 函数 调用 方式 使 用 的 函数 称 为 构造 函数 。 

在 下 文中 ， 基 本 上 都 会 使 用 函数 这 一 术语 。 不 过 ， 函 数 与 方法 或 构造 函数 主要 是 名 称 上 的 差别 ， 因 
此 对 函数 的 说 明 也 适用 于 方法 和 构造 函数 。 


国画 数 声明 语 各 的 后 时 | 


通过 函数 声明 语句 声明 的 函数 ， 可 以 在 进行 声明 的 代码 行 之 前 就 对 其 调用 。 请 看 下 面 的 具体 示例 。 
虽然 这 个 例子 在 函数 的 作用 域内 进行 ， 不 过 对 于 全 局 作用 域 情况 也 是 相同 的 。 


J funetlon dle { 











































































































() 
En // 在 声明 函数 fn 之 前 对 其 进行 调用 
EUnEEISnEE 人 全 ESIIESLE 人 


// 函数 调用 
SS Come ll 
called 
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在 通过 匿名 也 数 表达 式 进行 定义 的 情况 下 结果 将 会 不 同 。 下 面 的 代码 结构 上 与 上 面 的 类 似 ， 却 是 错 


unetion qorme() 
El 
var fn = function() { print('called'); }; 


// 函数 调用 
JSEdetkE ty 
TypeError: fn is not a function 


6.3 “| 参数 与 局 部 变量 


辣 | 6.3.1 arguments 对象 | 
可 以 通过 在 函数 内 使 用 arguments 对 象 来 访问 实 参 。 使 用 方式 如 代码 清单 6.1 所 示 。 
| 代码 清单 6.1 使 用 arguments 对 象 的 例子 


funcEelon cal { 
print (arguments.1length); 
print (arguments[0], arguments[1], arguments [2]); 








// 对 代码 清单 6 .1 的 调用 

Is en // arguments .length 为 实 参 的 数量 , 值 为 1。arguments [0] 的 值 为 7 
下 

7 undefinedq undefined 


> Em eo 
4 epee length 为 实 参 的 数量 ,， 值 为 2。arguments [0] 的 值 为 7，arguments [1] 的 值 为 8 


8 undefined 


了 SEE ES 
1] are length HRGHN 值 为 1。arguments [0] 的 值 为 7，arguments [1] 的 值 为 8，arguments [2] 的 值 为 9 





- S09 


没有 相对 应 的 形 参 的 实 参 也 可 以 通过 arguments 访问 。 由 于 能 够 通过 arguments.length 获知 实 参 的 数 
量 ， 因 此 可 以 写 出 所 谓 的 可 变 长 参数 函数 。 而 形 参 的 数量 则 可 以 通过 Function 对 象 自身 的 length 属性 
(在 上 面 的 例子 中 是 fn.length ) 来 获得 。 

虽然 arguments 可 以 以 数组 的 方式 使 用 ， 不 过 它 本 身 并 不 是 数组 对 象 。 因 此 ， 无 法 对 其 使 用 数组 类 中 
的 方法 。 详 细 内 容 请 参见 之 后 的 7.1.11 节 。 


国 6.3.2 递归 天 数 | 


递归 函数 是 一 种 在 函数 内 对 自身 进行 调用 的 函数 。 这 种 方式 被 称 为 递归 执行 或 递归 调用 。 代 码 清单 
6.2 是 个 具体 例子 。 
| 代码 清单 6.2 n 的 阶乘 ( 递归 函数 的 例子 ) 


ET 站 本 EEC) 
人 
























































return 1; 
} else { 


图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 


第 6 章 ”函数 与 闭 包 115 @ 





reburn on factordal(n 0) 


// 对 代码 清单 6 .2 a 


js> factorial(5 // 5!=(5*4*3*2*1)=120 
120 


如 果 北 归 函 数 不 停 地 调用 自身 ， 运 行将 不 会 终止 ( 这 与 无 限 循环 的 情况 是 一 样 的 ， 因 此 俗称 为 无 
限 递 归 )。JavaScript 发 生 无 限 递归 之 后 的 反应 取决 于 实际 的 运行 环境 。 如 果 是 SpiderMonkey 的 壳 层 ， 
则 会 像 下 面 这 样 发 生 InternalError。 而 在 Java6 附带 的 Rhino 中 ， 发 生 无 限 递归 后 则 会 产生 java.lang. 
OutOfMemoryError 而 使 Rhino 停止 运行 。 

// SpiderMonkey 中 的 无 限 递归 



































ES eae a en 
js > Em) 
InternalError: too much recursion 





必须 在 递归 函数 内 部 设置 递归 执行 的 停止 条 件 判断 ， 这 称 为 终止 条 件 。 对 于 代码 清单 6.2 中 的 情况 ， 
在 函数 开始 处 会 对 参数 n 的 值 是 否 小 于 等 于 1 进行 判断 。 终 止 条 件 的 代码 并 不 一 定 非 要 写 在 递归 函数 的 
头 部 ， 不 过 一 般 来 说 ， 写 在 头 部 更 便于 阅读 。 

可 以 通过 循环 实现 的 处 理 一 定 也 能 够 通过 递归 处 理 来 实现 ， 反 之 也 成 立 。 这 是 因为 ， 递 归 调 用 和 循 
环 处 理 两 者 的 本 质 说 到 底 都 是 反复 执行 某 一 操作 。 大 多 数 情况 下 ， 通 过 循环 来 实现 的 代码 会 更 为 简洁 明 
了 。 而 且 ， 在 JavaScript 中 递归 处 理 的 执行 效率 并 不 一 定 很 高 。 因 此 ， 一 般 情 况 下 最 好 避免 在 JavaScript 
中 使 用 递归 。 

能 够 通过 arguments.callee 来 获取 正在 执行 的 Function 对 象 的 引用 。 这 一 引用 可 以 在 通过 没有 名 字 
的 函数 (所谓 的 匿名 函数 ) 来 实现 递归 函数 时 使 用 。 下 面 是 一 个 计算 n 的 阶乘 的 具体 示例 (请 注意 ， 在 
ECMAScript 第 5 版 的 静态 模式 中 ，arguments.callee 被 禁止 使 用 )。 


// 的 阶乘 (利用 arguments.callee ) 





































































































| habiatel eke) {is (n <= 1) return 1; else return n * arguments.callee(n - 1); }) (5Ys 
120 





。 64 | 作用 域 


作用 域 指 的 是 名 称 ( 变量 名 与 函数 名 ) 的 有 效 范围 。 关 于 作用 域 的 有 关内 容 ，5.3 节 和 5.4 节 也 有 涉及 。 
在 JavaScript 中 有 以 下 两 种 作用 域 。 

@ 全 局 作用 域 

@ 函数 作用 域 


全 局 作用 域 是 函数 之 外 ( 最 外 层 代 码 ) 的 作用 域 。 在 函数 之 外 进行 声明 的 名 称 属于 全 局 作用 域 。 这 
些 名 称 就 是 所 谓 的 全 局 变量 以 及 全 局 函数 。 

而 在 函数 内 进行 声明 的 名 称 拥有 的 是 函数 作用 域 ， 它 们 仅 在 该 函数 内 部 才 有 效 。 相 对 于 全 局 作用 域 ， 
可 以 将 其 称 为 局 部 作用 域 ， 相 对 于 全 局 变量 ， 又 可 以 将 其 称 为 局 部 变量 。 作 为 函数 形 参 的 参数 变量 也 属 
于 函数 作用 域 。 

JavaScript 的 函数 作用 域 的 机 制 ， 与 Java (以 及 其 他 很 多 的 程序 设计 语言 ) 中 的 局 部 作用 域 有 着 微 
妙 的 差异 。 在 Java 中 ， 局 部 变量 所 具有 的 作用 域 是 从 方法 内 对 该 变量 进行 声明 的 那 一 行 开始 的 ;而 在 
JavaScript 中 ， 函 数 作用 域 与 进行 声明 的 行 数 没 有 关系 。 
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请 看 代码 清单 6.3 的 例子 。 
| 代码 清单 6.3 ”函数 作用 域 的 注意 事项 


Var XX = 1} 
Faneteemee 


























ee // 对 变量 x 进行 访问 
0 
i // 对 变量 x 进行 访问 








// 对 代码 清单 6. 3 的 调用 
ES E(B 


x = undefined 
三 这 


乍 一 看 ， 会 认为 函数 f 内 的 第 一 个 print 显示 的 是 全 局 变量 x。 人 然而 ， 这 里 的 x 是 在 下 一 行进 行 声明 
的 局 部 变量 x。 这 是 因为 ， 局 部 变量 x 的 作用 域 是 整个 函数 f 内 部 。 由 于 此 时 还 没有 对 其 进行 赋值 ， 因 此 
变量 x 的 值 为 undefined 值 。 也 就 是 说 ， 函 数 f 与 下 面 的 代码 是 等 价 的 。 

// 与 代码 清单 6 .3 等 价 的 代码 
































functlon E(t 
Ee 
下 Ti 
2 
TD 


代码 清单 6.3 中 的 代码 非常 不 易于 理解 ， 常 常 是 发 生 错 误 的 原因 。 因 此 ,我们 建议 在 函数 的 开始 处 
对 所 有 的 局 部 变量 进行 声明 。 
Java 等 语言 建议 直到 要 使 用 某 一 变量 时 才 对 其 进行 声明 ， 不 过 JavaScript 则 有 所 不 同 ， 对 此 请 加 以 注意 。 


故 6.4.1 浏览 器 与 作用 域 


在 客户 端 JavaScript 中 ， 各 个 窗口 (标签 )、 框架 (包括 这 ame ) 都 有 其 各 自 的 全 局 作用 域 。 在 窗 
之 间 是 无 法 访问 各 自 全 局 作用 域 中 的 名 称 的 ， 但 父辈 与 其 框架 之 间 可 以 相互 访问 。 
更 为 详细 的 内 容 将 在 本 书 第 3 部 分 说 明 。 


国 6.4.2 块 级 作用 域 | 


在 JavaScript (ECMAScript ) 中 不 存在 块 级 作用 域 的 概念 ， 这 一 点 与 其 他 很 多 的 程序 设计 语言 不 同 。 
举例 来 说 ， 请 看 图 6.1。 如 果 认 为 块 级 作用 域 存在 ， 就 会 认为 第 二 个 print 的 结果 应 该 是 1， 不 过 实际 的 输 
出 却 是 2。 


图 6.1 对 于 块 级 作用 域 的 误解 








DD 
































J Man 
ee eol 


a ; // 认为 结果 会 是 1? 

4 

在 图 6.1 中 ， 看 似 是 在 代码 块 内 重新 声明 了 块 级 作用 域 中 的 变量 x， 但 实际 上 ， 它 只 是 将 全 局 变量 x 
赋值 为 了 2。 也 就 是 说 ， 这 与 下 面 的 代码 是 等 价 的 。 

// 与 图 6.1 相等 价 的 代码 














TS Var 
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ET 


le osu a = 
X= 2 


在 函数 作用 域 中 也 存在 这 种 对 块 级 作用 域 的 错误 理解 。 在 for 语句 中 对 循环 变量 进行 声明 是 一 种 习惯 
做 法 ,不 过 该 循环 变量 的 作用 域 并 不 局 限于 for 语句 内 。 在 下 面 的 代码 中 ， 其 实 是 对 局 部 变量 i 进行 了 循 
环 使 用 。 


ume Colome (ee 
War Le 
en (vas a Or de Op Me 


， 省 略 
此 时 变量 i 的 值 为 10 


















































} 


故 s.4.s et 与 块 级 作用 域 | 


虽然 在 ECMAScript 第 5 版 中 没有 块 级 作用 域 ， 不 过 JavaScript 自 带 有 let 这 一 增强 功能 ， 可 以 实现 
块 级 作用 域 的 效果 。 可 以 通过 let 定义 (let 声明 )、let 语句 ， 以 及 let 表达 式 三 种 方式 来 使 用 let 功能 。 虽 
然 语法 结构 不 同 ， 但 是 原理 是 一 样 的 。 接 下 来 依次 说 明 。 

let 定义 (let 声明 ) 与 var 声明 的 用 法 相同 。 可 以 通过 下 面 这 样 的 语法 结构 对 变量 进行 声明 。 













































































let varl [= valuel] [, var2 [= value2]] [, :…, varN [= valueN]]; 


通过 let 声明 进行 声明 的 变量 具有 块 级 作用 域 。 除 了 作用 域 之 外 ， 它 的 其 他 方面 与 通过 var 进行 声明 
的 变量 没有 区 别 。 代 码 清单 6.4 中 是 个 简单 的 例子 。 


有 代码 清单 6.4 let 声 明 


























Eunecien eo 
Tet = 
人 (eon // 输出 1 
let x = 2; // 输出 2 
BETne (x 
// let x = 2 的 作用 域 到 此 为 止 
Bre (Ce // 输出 1 


// 对 代码 清单 6 .4 的 调用 
js> E() 














如 果 不 考 虑 作用 域 的 不 同 ，let 变量 ( 通过 let 声明 进行 声明 的 变量 ) 与 var 变量 的 执行 方式 非常 相 
似 。 请 参见 代码 清单 6.5 中 的 注释 部 分 。 
有 代码 清单 6.5 let 变量 的 执行 方式 的 具体 示例 

// 名 称 的 查找 

FoneESnEEETRO 


人 


{ 
print (x) ; // 输出 1。 将 对 代码 块 由 内 至 外 进行 名 称 查找 
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// 该 名 称 在 进行 let 声明 之 前 也 是 有 效 的 


Function Fon 

















Let x Ss 1 
{ 
print (x) ; // 这 里 是 let x = 2 的 作用 域 。 不 过 由 于 还 未 对 其 进行 赋值 ， 所 以 let 变 
量 x 的 值 为 undefined 
Tat x 
ie // 输出 2 





// 对 代码 清单 6 .5 的 调用 
oe slg 
工 


js> £2();undefined 
骂 


像 下 面 这 样 ， 将 for 语句 的 初始 化 表达 式 中 的 var 声明 改 为 let 变量 之 后 ， 作 用 域 就 将 被 限制 于 for 语 




















句 之 内 。 这 样 的 做 法 更 符合 通常 的 思维 方式 。for in 语句 以 及 for each in 语句 也 是 同 理 。 


for (let i = 0, len = arr.length; i < len; i++) { 
relente (eee la ya 


这 里 已 是 let 变量 i 的 作用 域 之 外 
let 语句 的 语法 结构 如 下 。let 变量 的 作用 域 被 限制 于 语句 内 部 。 
































let (varl [= valuel] [, var2 [= value2]] [, …, varN [= valueN]]) 语句 ; 
下 面 是 let 语句 的 具体 示例 。 
et (ee WV 代码 块 
Prine (ee // 输出 1 
} // let 变量 的 作用 域 到 此 为 上 


代码 清单 6.6 是 一 个 混用 var 声明 与 let 语句 的 具体 示例 。 
| 代码 清单 6.6 ”var 声明 与 let 语句 


FUnEETCD el, 
he 
TS 





Dene eo // 输出 2 
SET 
ne) // 输出 3 
| 
Ione tele) // 输出 1 


// 对 代码 清单 6 .6 的 调用 
EEE (0) 





在 let 语句 内 部 ， 声 明 与 let 变量 同名 的 变量 会 引起 TypeError 问题 。 下 面 是 一 个 例子 。 
// 不 能 通过 let 声明 同名 变量 
Let = 站 { 
ce 
} 


TypeError: redeclaration of variable x: 


// 也 不 能 通过 var 声明 同名 变量 
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lee (= 1) 
Var XX = 27 
} 


TypeError: redeclaration of let x: 


let 表达 式 的 语法 结构 如 下 所 示 。let 变量 的 作用 域 被 限制 于 表达 式 内 部 。 














let (varl [= valuel] [, var2 [= value2]] [, :…, varN [= valueN]]) 表达 式 ; 


下 面 是 let 表达 式 的 具体 示例 。 




















说 在 表达 式 x+1 中 使 用 了 变量 ( 值 为 2 ) 


起 








国 6.4.4 其 大 函数 与 作用 域 | 
这 


在 JavaScript 中 我 们 可 以 对 函数 进行 向 套 声明 。 也 就 是 说 ， 可 以 在 一 个 函数 中 声明 男 一 个 函数 。 议 
时 ， 可 以 在 内 部 的 函数 中 访问 其 外 部 函数 的 作用 域 。 在 5.4 节 中 提 到 过 ， 从 形式 上 来 说 ， 名 称 的 查找 是 
由 内 向 外 的 。 在 最 后 将 会 查找 全 局 作用 域 中 的 名 称 。 

代码 清单 6.7 是 个 具体 例子 。 在 代码 清单 6.7 中 写 的 是 函数 声明 语句 ， 如 果 使 用 的 是 匿名 函数 表达 
式 ， 效果 是 相同 的 。 
有 代码 清单 6.7 说 套 西 数 及 其 作用 域 


Eunceloneme 




































































var zo // 函数 fl 的 局 部 变量 

// 旋 套 函数 的 声明 

ENSO EU 
和 2 // 函数 f2 的 局 部 变量 
1 // 对 函数 fl 的 局 部 变量 进行 访问 
print (y) ; // 对 函数 £2 的 局 部 变量 进行 访问 














} 
// 访 套 函数 的 声明 


uneeTlone Es 
Pee // 如 果 不 存在 全 局 变量 y， 则 会 发 生 ReferenceError 








// 启 套 函数 的 调用 
2 


E30 


// 对 代码 清单 6 .7 的 调用 
js> £1(); 


二 
忌 
ReferenceError: y is not defined 


冯 6.4.5 变量 隐藏 上 


在 这 里 使 用 了 隐藏 这 一 比较 专业 的 术语 ， 它 指 的 是 ， 通 过 作用 域 较 小 的 变量 (或 函数 )， 来 隐藏 作用 
域 较 大 的 同名 变量 (或 函数 )。 这 种 情况 常常 会 在 无 意 中 发 生 ， 从 而 造成 错误 。 例 如 ， 在 下 面 的 代码 中 
全 局 变 量 n 被 局 音 变量 n 所 隐藏 。 


js> var n = 1; // 全 局 变量 
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Munetnonne el // 局 部 变量 隐藏 了 全 局 变量 


VaL n = 


EEC 


// 函数 调用 
0 
2 








这 段 代码 的 功能 显而易见 。 乍 一 看 ， 类 似 于 代码 清单 6.3 或 图 6.1 那样 的 函数 作用 域 以 及 块 级 作用 域 所 构 
成 的 隐藏 并 不 会 引发 什么 问题 。 不 过 ， 当 代码 变 得 更 为 复杂 时 ， 问 题 就 不 容易 发 现 了 ， 因 此 仍 需 多 加 注意 。 





G5 








函数 是 一 种 对 象 





函数 也 是 一 种 对 象 。 从 内 部 结构 来 看 ， 它 继承 于 Function 对 象 。 可 以 像 下 面 这 样 通过 constructor 属 








nl 

















性 验证 。 至 于 更 





具有 实际 意义 的 内 容 ， 将 在 之 后 的 6.6.1 节 说 明 。 








uneenene 函数 的 内 容 无 关 紧 要 ， 因 此 留 空 


J fF CONneteuotorE, 


function Function() { 


[native 


} 


[elele [= 











将 匿名 函数 赋值 给 某 个 变量 ， 与 将 Function 对 象 的 引用 赋值 给 某 个 变量 ， 在 本 质 上 是 相同 的 ， 仅 仅 
是 表述 方式 的 不 同 而 已 。 在 通常 的 语 境 中 ， 函 数 的 概念 等 价 于 Function 对 象 的 引用 。 因 此 ， 函 数 的 声明 


与 Function 对 象 自 











的 生成 也 是 等 价 的 。 


从 形式 上 来 看 ， 代 码 清 单 6.8 中 例 举 的 4 种 方式 差异 巨大 ， 不 过 从 整体 上 来 看 ， 这 些 代码 的 功能 是 





类 似 的 ， 都 是 先 和 9 








成 一 个 实体 ( 即 没 有 名 字 的 对 象 )， 之 后 将 其 与 引用 了 它 的 名 称 相 结 合 。 


| 代码 清单 6.8 ”从 整体 上 来 看 ， 都 是 生成 了 实体 并 赋予 一 个 引用 了 该 实体 的 名 称 


var obj 


{bg 


var obj = new MyClass (); 


var obj 
netenEooj 


EDGETSOT De 


W 划 








可 以 像 下 面 这 样 ， 通 过 对 Function 也 数 进行 构造 函数 调用 ， 来 生成 一 个 Function 对 象 。 不 过 这 种 用 


法 并 不 多 见 。 











// 函数 声明 ( Function 对 象 的 生成 ) 


j S> Var sum 


= Function('a' 'ib', 'return Number(a) + Number (bp);'); 


WY 最 后 一 个 参数 是 函数 傈 。 它 之 前 的 参数 都 是 函数 的 形 参 。 


// 函数 的 调用 


js> sum(3, 4); 


i 








由 于 函数 是 一 种 对 象 ， 因 此 自然 可 以 读 写 Function 对 象 的 属性 。 
js> function f() {}  ”// 函数 内 部 的 内 容 对 读 写 操作 不 会 造成 影响 ， 因 此 在 此 使 用 了 一 个 空 函数 


了 局 忆 二 下 二 于 已 OFE 


JSETDEYLnE (人 E 





Oo // 对 Function 对 象 f 的 foo 属 ' A 


EO) 








如 果 对 属性 赋值 以 其 他 的 函数 ， 就 相当 于 为 该 函数 (对象 ) 添加 了 方法 。 








汪汪 下 ee = umetren emt ced 





1S FEOoOLt 
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doit called 


在 这 种 情况 下 ， 一 个 变量 与 其 所 引用 的 对 象 之 间 的 关系 可 能 有 些 复 杂 ， 不 过 只 要 记 住 Function 对 象 
含有 一 些 可 执行 代码 的 这 一 事实 ， 就 不 会 有 什么 问题 ( 图 6.2 )。 


l 6.2 变量 f 所 引用 的 Function 对 象 ( Function 对 象 中 含有 引用 了 其 他 函数 的 变量 ) 


























函数 名 1 Function 对 象 


ee 代码 : 
I 由 


' 属性 : 'FOO' 
f; 全 局 对 象 的 属性 属性 : doit 



































引 





Function 对 象 
代码 : { 
print('doit called ): 
} 











国 函数 名 与 调试 的 难 易 度 | 


对 象 从 本 质 上 来 说 是 不 具有 名 称 的 。 由 于 函数 也 是 一 种 对 象 ， 所 以 Function 对 象 也 没有 名 称 。 从 原 
则 上 来 说 这 没有 错 ， 不 过 有 必要 再 对 此 做 一 些 补充 说 明 。 在 通过 函数 声明 语句 以 及 匿名 函数 表达 式 对 函 
数 名 进行 指定 时 ， 在 Function 对 象 的 内 部 储存 了 其 表示 名 称 。 

在 下 面 的 代码 中 ，fn_name 的 部 分 将 作为 Function 对 象 的 表示 名 称 。 


funotion nnamel 0 // 函数 声明 语句 
Vareene runeeon namel // 匿名 函数 表达 式 


函数 的 表示 名 称 ” 这 一 说 法 为 本 书 独创 ， 并 非 通 用 术语 。 我 们 特意 使 用 这 一 名 称 为 了 与 通常 的 函数 
名 的 概念 相 区 分 。 
函数 名 是 具有 Function 对 象 的 引用 的 变量 名 。 而 “函数 的 表示 名 称 ” 则 是 被 储存 于 Function 对 象 内 部 
的 名 称 。 虽 然 无 法 直接 通过 “函数 的 表示 名 称 ” 来 调用 函数 ， 不 过 对 于 使 用 函数 声明 语句 的 情况 ， 由 于 在 
function 之 后 所 写 的 名 称 就 是 其 函数 名 ， 所 以 从 表面 上 来 看 并 没有 区 别 。 然 而 在 内 部 ， 函 数 名 与 函数 的 表示 
名 称 是 分 别 存在 的 。 下 面 的 代码 没什么 实际 意义 ， 不 过 可 以 对 这 一 点 进行 验证 。 
) 本 呈请 向 各 的 村 各 数 内 部 的 内 容 对 调用 操作 不 会 和 成 影响 ， 而 在 此 使 用 了 一 个 空 函 数 


了 全 让 来 就 也 可 以 通过 函数 名 fn2 对 其 进行 调用 
js> fn = null; // 将 变量 fn 的 值 置 为 null 



































































































































js> fn2; // “函数 的 表示 名 ”仍然 为 fn 


ne 














在 对 Function 对 象 进行 print 等 操作 时 会 使 用 函数 的 表示 名 称 。 例 如 ， 在 显示 constructor 属性 所 引用 
的 Function 对 象 时 ， 所 表示 的 名 称 即 函数 的 表示 名 称 。 而 在 调试 中 显示 调用 栈 时 ， 函 数 的 表示 名 称 将 发 
挥 更 大 的 作用 。 

在 JavaScript 程序 设计 中 ， 与 函数 声明 语句 相 比 ， 使 用 匿名 函数 表达 式 的 情况 似乎 越 来 越 多 。 这 时 ， 
常常 会 省 略 写 在 function 之 后 的 函数 的 表示 名 称 。 但 因为 在 调试 过 程 中 函数 的 表示 名 称 是 非 党 有 用 的 ， 
所 以 还 请 对 这 一 问题 多 加 考虑 。 
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6.6 Function 类 





Function 类 是 用 于 Function 对 象 的 类 。 表 6.2 总 结 了 Function 类 的 函数 以 及 构造 函数 调用 。 


表 6.2 Function 类 的 函数 以 及 构造 函数 调用 











通过 参数 p0,p1,…. 与 函数 体 body ( 字符 





Function(p0, p1, ..., body) 





成 Function 实例 


























通过 参数 p0,p1,…. 与 函数 体 body ( 字符 





new Function(p0, p1, ..., body 





成 Function 实例 









































如 果 没 有 特别 的 理由 ， 我 们 建议 不 要 通过 以 上 方式 ， 而 是 使 
































j] 孙 数 声明 语句 或 匿名 函数 表达 式 来 





上 
HT 





成 函数 。 
表 6.3 总 结 了 Function 类 的 属性 。 
表 6.3 ”Function 类 的 属性 名 
属性 名 说 明 
prototype 原型 链 
length 值 为 1 

















表 6.4 总 结 了 Function.prototype 对 象 的 属性 。 
表 6.4 Function.prototype 对 象 的 属性 名 

































































































































































































































































































































































































































































属性 名 说 明 
apply(thisArg, argArray) 符 argArray 的 所 有 元 素 作为 参数 对 函数 调用 。 函 数 内 的 this 引用 引用 的 是 thisArg 对 象 
, 返回 一 个 新 的 Function 对 象 。 调 用 此 函数 时 ，arg0、arg1 等 是 实 参 ， 函 数 内 的 this 引用 引 
bind(thisArgl, arg0, arg1, ...]) 的 是 thisArg 对 象 
call(thisArgl, arg0, arg1, ...]) 梅 arg0、arg1 等 作为 实 参 对 函数 调用 。 函 数 内 的 this 引用 引用 的 是 thisArg 对 象 
caller JavaScript 自 带 的 增强 功能 。 表 示 的 是 对 当前 函数 调用 的 函数 
constructor 对 Function 类 对 象 的 引 
isGenerator() JavaScript 自 带 的 增强 功能 。 当 函数 是 generator 时 ， 返 回 true (*1 ) 
length 函数 的 形 参 的 数量 
name JavaScript 自 带 的 增强 功能 。 函 数 的 表示 名 称 ( *2 ) 
toSourcel) JavaScript 自 带 的 增强 功能 。 求 值 结果 将 返 区 函数 进行 生成 的 字符 串 
toString() 符 函 数 体 转 换 为 字符 串 形式 并 返 世 
(*1 ) 请 参见 7.1.13 节 。 
(*2 ) 请 参见 6.5.1 节 。 
表 6.5 总 结 了 Function 类 的 实例 属性 。 
表 6.5 ”Function 类 的 实例 属性 
属性 名 说 明 
( 内 部 属性 ) 函数 本 身 的 代码 
caller JavaScript 自 带 的 增强 功能 。 表 示 的 是 对 当前 函数 进行 调用 的 函数 
length 函数 的 参数 的 数量 
name JavaScript 自 带 的 增强 功能 。 函 数 的 表示 名 称 ( *1 
prototype 于 原型 链 
































(*1 ) 请 参见 6.5.1 节 。 


贺 Function 类 的 继承 





JavaScript 的 函数 是 Function 对 象 的 对 象 实例 。 如 果 用 原型 继承 相关 的 术语 来 解释 ， 即 JavaScript 中 


的 函数 的 原型 对 象 是 Function.prototype。 
可 以 通过 图 6.3 的 方式 对 此 进行 验证 。 

















图 63 使 用 的 是 函数 声明 语句 ， 知 使 用 











匿名 函数 也 是 一 样 的 结果 。 
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6.3 对 Function 类 的 继承 的 验证 


Is FUneelen en 


ES veel Se oe ep // 构造 函数 


EU 
js> fn. proto === Function.prototype; // 原型 对 象 
true 


下 面 的 说 法 可 能 会 有 些 不 易于 理解 ， 不 过 Function 函数 也 是 Function 类 的 对 象 实例 。 它 们 之 间 具 有 
如 下 自我 引用 的 关系 。 























Seunetiuon == punoelonieoneteuetor, 
Ec 


SS purictuon nroeeon munetion Procor es 
true 


函数 是 原型 继承 于 Function 对 象 ( Function 类 ) 的 。 这 就 意味 着 ， 对 于 一 个 函数 ， 可 以 读 取 访问 其 




















在 表 6.4 中 所 列 出 的 属性 (或 是 对 其 进行 方法 调用 )。 对 这 一 关系 的 说 明 有 些 复 杂 ， 不 过 其 实际 的 作用 也 
就 仅 此 而 已 。 


”6.7 | 说 套 函数 声明 与 闭 包 














国 6.7.1 对 闭 包 的 初步 认识 上 


为 了 让 没有 接触 过 闭 包 (closure ) 这 个 词 的 人 也 能 理解 其 含义 ， 这 里 先 搬 开 语言 的 严密 性 ， 试 着 从 
表面 上 说 明 。 请 看 下 面 的 代码 示例 。 

可 和 证 二 齐全 从 天 // 将 函数 £ 的 返回 值 赋值 给 变量 f 

seni // 对 fn 的 函数 调用 


a 
Se 























2 
2 En) 
3 








函数 了 的 内 容 将 在 之 后 说 明 ， 在 此 先 不 必 在 意 。 函 数 f 的 返回 值 是 函数 ( 对象 的 引用 )， 这 里 将 其 赋 
值 给 了 变量 血 。 在 调用 函数 血 时 ， 其 输出 结果 每 次 都 会 增加 1。 可 以 以 Java 的 方式 对 其 内 部 实现 作 如 下 
EE 测 ， 该 对 象 具 有 一 个 私有 域 作 为 内 部 计数 器 。 当 方法 被 调用 时 ， 内 部 计数 器 将 会 增加 。 不 过 从 外 表 上 
只 能 看 到 函数 调用 这 一 行为 。 

函数 f 的 内 部 结构 如 下 所 示 。 更 为 详细 的 内 容 将 在 下 一 节 说 明 。 


Ene Galonmee (ye 
War cnt = 0 
return function() { return ++cnt; } 


















































从 表面 上 来 看 ， 闭 包 是 一 种 具有 状态 的 函数 。 如 果 只 是 希望 简单 地 使 用 闭 包 ， 这 样 理解 就 可 以 了 。 
或 者 也 可 以 将 闭 包 的 特征 理解 为 ， 其 相关 的 局 部 变量 在 函数 调用 结束 之 后 将 会 继续 存在 。 
例如 ， 在 上 面 的 例子 中 ,函数 内 的 局 部 变量 cnt 在 函数 f 的 调用 之 后 依然 有 效 。 















































闻 6.7.2 闭 包 的 原理 | 
图 谋 套 的 函数 声明 








闭 包 的 前 提 条 件 是 需要 在 函数 声明 的 内 部 声明 男 一 个 函数 ( 即 骸 套 的 函数 声明 )。 下 面 是 一 个 般 套 函 
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数 声 明 的 简单 的 例子 。 在 下 面 的 例子 中 使 用 的 是 函数 声明 语句 ， 若 使 用 匿名 函数 表达 式 也 是 一 样 的 结果 。 
js> function E() { A EY | 
funectiocn 9() 


BrinEl(re Le called ys 


ST 


} 


// 对 函数 进行 调用 
SS (0 
g is called 


在 函数 f 中 包含 函数 g 的 声明 以 及 调用 语句 。 在 调用 函数 f 时 ， 就 间接 地 调用 了 函数 g。 这 一 行为 本 
身 并 没有 难以 理解 之 处 ， 不 过 为 了 能 更 好 地 理解 该 过 程 ， 在 此 对 其 内 部 机 制 进行 说 明 。 

在 最 外 层 代 码 中 对 函数 f 的 声明 ， 具 有 Function 对 象 的 生成 以 及 通过 变量 f 来 引用 该 Function 对 
象 这 两 层 含 义 。 同 时 ， 变 量 f 是 全 局 对 象 的 属性 。 之 后 将 不 再 使 用 变量 这 个 词 ， 而 改 用 属性 这 一 术语 。 

在 JavaScript 中 ， 调 用 函数 时 将 会 隐 式 地 生成 Call 对 象 。 方 便 起 见 ， 我 们 将 调用 函数 f 时 生成 的 Call 
对 象 称 作 Call-f 对 象 。 在 函数 调用 完成 之 后 ，Call 对 象 将 被 销毁 。 

函数 f 内 的 函数 g 的 声明 将 会 生成 一 个 与 函数 g 相对 应 的 Function 对 象 。 其 名 称 g 是 Call-f 对 象 的 
属性 。 由 于 每 一 次 函数 调用 都 会 独立 生成 Call 对 象 ， 因 此 在 调用 函数 g 时 将 会 隐 式 地 生成 另 一 个 Call 对 
象 。 方 便 起 见 ， 我 们 将 该 Call 对 象 称 作 Call-g 对 象 。 

离开 函数 g 之 后 ，Call-g 对 象 将 被 自动 销毁 。 类 似 地 ， 离 开 函数 f 之 后 ，Call-f 对 象 也 将 自动 销毁 。 
此 时 ， 由 于 属性 g 将 与 Call-g 对 象 一 起 被 销毁 ， 所 以 由 g 所 引用 的 Function 对 象 将 会 失去 其 引用 ， 而 最 
终 (通过 垃圾 回收 机 制 ) 被 销毁 。 



















































































图 嵌 套 函数 与 作用 域 
首先 我 们 像 下 面 这 样 对 代码 作 少 许 修改 。 
functlon E(t 


Var nm = L223 

EU ee 
Tele e a le ep nl 
Berrne (Vo rs ealled 


// 对 函数 进行 调用 
ES El)p 


TS Lo 
g is called 


这 一 结果 和 代码 给 人 的 直观 感受 也 可 以 说 是 一 致 的 。 根 据 其 形式 ， 可 以 像 下 面 这 样 来 理解 其 作用 域 ， 
即 在 内 层 进行 声明 的 函数 g 可 以 访问 外 层 的 函数 了 的 局 部 变量 ( 在 这 里 指 变量 n )。5.4 节 提 到 过 ， 函 数 内 
的 变量 名 的 查找 是 按照 先 Call 对 象 的 属性 再 全 局 对 象 的 属性 这 样 的 顺序 进行 的 。 对 于 骨 套 声明 的 函数 ， 
内 部 的 函数 将 会 首先 查找 被 调用 时 所 生成 的 Call 对 象 的 属性 ， 之 后 再 查找 外 层 函 数 的 Call 对 象 的 属性 。 
这 一 机 制 被 称 为 作用 域 链 。 
图 谋 套 函数 的 返回 

我 们 进一步 对 之 前 的 代码 作 如 下 修改 。 


ET 
Var 1 = 123; 
DC ES el 
Ne (OS 
BErne (os ea 
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} 
return g; // 在 内 部 返回 已 被 声明 的 函数 ( 未 对 函数 进行 调用 ) 





} 


// 对 函数 进行 调用 
ST 
funcelorn ol 


Print Wn 48 Vp ny 
preintilug Ta eaeau) 





由 于 retum g 语句 ， 函 数 f 将 会 返回 一 个 Function 对 象 ( 的 引用 ) 调用 函数 f 的 结果 是 一 个 Function 对 
象 。 这 时 ， 虽然 会 生成 与 函数 f 相 对 应 的 Call 对 象 (Callf 对象 ) ( 并 在 离开 函数 了 后 被 销毁 )， 但 由 于 不 会 调用 
函数 g， 所 以 此 时 还 不 会 生成 与 之 对 应 的 Call 对 象 ( Call-g 对 象 )， 请 对 此 加 以 注意 。 
国 闭 包 

现 和 尝试 将 函数 人 的 返回 值 赋值 给 另 一 个 变量 。 虽 然 也 可 以 直接 调用 函数 而 不 赋值 ， 不 过 为 了 使 整个 
过 程 更 易于 理解 ， 还 是 采用 赋值 操作 。 变 量 名 为 2， 即 通过 g2 来 调用 函数 。 


Sv // 将 返回 的 函数 赋值 给 变量 
js> g2() ; // 调用 函数 ( 函数 于 内 的 函数 g ) 






























































wi 2 
g is called 


这 一 结果 说 明 可 以 从 函数 了 的 外 部 调用 函数 g。 进 一 步 说 ， 这 说 明 函 数 f 的 局 部 变量 n 在 函数 f 被 调 
用 之 后 依然 存在 。 从 表面 上 看 ， 这 与 Java 等 其 他 的 过 程式 程序 设计 语言 中 的 规则 是 相反 的 (一般 来 说 ， 


























离开 函数 之 后 其 局 部 变量 就 会 无 效 )。 

函数 f 被 调用 时 生成 的 Call 对 象 ( Callf 对 象 ) 的 属性 g 所 引用 的 Function 对 象 (已 经 反复 强调 ， 对 象 
本 身 是 没有 名 称 的 )， 为 g2 所 引用 。 只 要 引用 的 变量 还 存在 ， 对 象 就 不 会 成 为 垃圾 回收 机 制 的 目标 。 因 此 ， 
只 要 名 称 g2 还 存在 ，Function 对 象 就 会 存在 。 该 Function 对 象 具有 CallLf 对 象 的 引用 ( 被 用 于 作用 域 链 ) 
因此 ， 如 果 被 名 称 g2 所 引用 的 这 个 Function 对 象 还 存在 ，Call-f 对 象 也 会 继续 存在 。 这 就 是 为 什么 在 离开 
了 函数 f 之 后 局 部 变量 n 依然 存在 的 原因 。 图 6.4 对 以 上 关系 进行 了 整理 。 
























































































































































l 6.4 闭 包 
函数 名 代码 : { 
~、~y var n =123 
引 function g() { 
print('n is'+n); 
函数 调 print('g is called’); 
var g2={(); } 
return g; 
| } 
ed 引用 ( 作用 域 链 ) Function 对 象 
(call-f) 代码 : 1 
属性 n:123 引 print(n is +n); 
属性 g: pe print('g is called'); 
A , 
函数 名 g2 














像 下 面 这 样 调用 函数 f 两 次 之 后 ，g2 与 g3 将 分 别 引 用 两 个 不 同 Function 对 象 。 之 后 ， 这 两 个 
Function 对 象 将 会 引用 各 自 不 同 的 Call-f 对 象 ， 因 为 Call 对 象 会 在 每 次 函数 调用 时 被 独立 生成 。 
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EE 
(2 


js= var gq2 
js> var g3 


为 了 更 清晰 地 展示 g2 与 g3 所 引用 的 函数 在 被 调用 时 的 不 同 ， 代 码 清 单 6.9 使 用 了 一 种 比较 有 技巧 
性 的 做 法 。 由 于 这 两 个 Call-f 对 象 是 不 相同 的 ， 因 此 可 以 分 别 通过 g2 与 g3 对 各 自 对 象 的 属性 ( 从 函数 ff 
的 角度 来 看 即 局 部 变量 n ) 访问 。 


| 代码 清单 6.9 闭 包 


functlonmn Elare ol 
Var n = 123 + Number (arg); 
Uetone U 
BET 
Beine (vo is ealled 















































} 


Eeturn oy 


} 


// 对 代码 清单 6. 9 的 调用 
SS var oa (2)3 
JS var SS (95 


= 
= 


oe ee 
4 a el 
g is called 


ee ea 
mn Ts 126 
g is called 


ES wee a 7 // 对 全 局 变量 n 进行 定义 ， 但 这 对 结果 没有 影响 
本 总 二 可 S 人 二 

mi 2 

g is called 


图 闭 包 与 执行 环境 
现 不 考虑 内 部 执行 过 程 ， 而 是 以 抽象 的 方式 重新 考察 对 g2 与 g3 的 调用 结果 不 同 的 这 一 现象 。 这 意 
味 着 可 以 通过 同一 段 代 码 生 成 具有 不 同 状 态 的 函数 。 这 就 是 所 谓 的 闭 包 。 说 得 专业 一 点 ， 闭 包 指 的 是 一 
种 特殊 的 函数 ， 这 种 函数 会 在 被 调用 时 保持 当时 的 变量 名 查找 的 执行 环境 。 
De ee ee oh ee de teen rt 
， 闭 包 仅仅 是 保持 了 变量 名 查找 的 状态 ， 而 并 没有 保持 对 象 所 有 的 状态 ， 对 此 请 加 以 区 分 。 也 就 是 
说 ee td ne 
属性 所 引用 的 之 前 的 对 象 的 状态 。 由 于 这 一 原因 而 产生 的 一 些 需 要 注意 的 地 方 ， 将 在 下 一 节 中 进行 说 明 。 
像 下 面 这 样 ， 在 匿名 函数 表达 式 中 直接 使 用 return 语句 的 写法 很 常见 ， 所 以 请 记 住 这 种 闭 包 的 习惯 
用 法 。 
Funecion f(arg nd 
var n = 123 + Number (arg); 
FeurneeunetonG 


Teele ni re ee 
Bm nS ole 
































































































































J 
} 


国 6.7.3 闭 包 中 需要 注意 的 地 方 | 
如 果 在 函数 f 内 有 两 个 函数 声明 ， 这 两 者 将 会 引用 同一 个 Call-f 对 象 ( 代码 清单 6.10 )。 这 是 在 使 用 
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JavaScript 的 闭 包 时 容易 出 错 的 地 方 。 
| 代码 清单 6.10” 闭 包 中 需要 注意 的 地 方 


funecionee (er 
Var n = 123 + Number (arg); 


functalone oo pn or me ale 
n++}; 
EUnetoneo( et ne eed 


setvurn lo ol 


// 对 代码 清单 6 .10 的 调用 

ES en (ent iee = ee 

a te ee // 对 闭 包 g 的 调用 
me a 

9 is called 


Ts> oand oo // 对 闭 包 gg 的 调用 
mm 
gg is called 








函数 g 与 函数 gg 保持 了 各 自 含 有 局 部 变量 n 的 执行 环境 。 由 于 声明 函数 g 时 的 n 值 与 声明 函数 gg 
时 的 mn 值 是 不 同 的 ， 因 此 闭 包 g 与 闭 包 gg 貌似 将 会 表示 各 自 不 同 的 n 值 。 但 实际 上 两 者 将 会 表示 相同 的 
值 。 这 是 因为 两 者 引用 了 同一 个 Call 对 象 ( Call-f 对 象 )。 


大 6.7.4 防范 命名 空间 的 污染 l 


转 模块 

接 下 来 ， 我 们 来 介绍 几 种 运用 了 闭 包 的 实际 示例 。 

在 JavaScript 中 ， 在 最 外 层 代 码 ( 孔 数 之 外 ) 所 写 的 名 称 ( 变量 名 与 函数 名 ) 具有 全 局 作用 域 ， 即 
所 谓 的 全 局 变量 与 全 局 函数 。 如 果 没 有 像 本 书 第 6 部 分 所 介绍 的 CommonJS 那样 男 外 提供 模块 功能 ， 
JavaScript 的 程序 代码 即使 在 被 分 割 为 多 个 源 文件 之 后 ， 也 能 相互 访问 其 全 局 名 称 。 在 JavaScript 的 语言 
规范 中 不 存在 所 谓 模 块 的 语言 功能 。 

因此 ， 对 于 客户 端 JavaScript， 如 果 在 一 个 HTML 文件 中 对 多 个 JavaScript 文件 进行 了 读 取 ， 则 它们 
相互 之 间 的 全 局 名 称 会 发 生 冲 突 。 也 就 是 说 ， 在 某 个 文件 中 使 用 的 名 称 无 法 同时 在 男 一 个 文件 中 使 用 。 
即使 在 独立 开发 中 这 也 很 不 方便 ， 在 使 用 他 人 开发 的 库 之 类 时 就 更 加 麻烦 了 。 

此 外 ， 全 局 变量 还 降低 了 代码 的 可 维护 性 。 不 过 也 不 能 就 简单 下 定论 说 问题 只 是 由 全 局 变量 造成 的 。 
这 就 如 同 在 Java 这 种 语言 规范 不 支持 全 局 变量 的 语言 中 ， 同 样 可 以 很 容易 地 创建 出 和 全 局 变量 功能 类 似 
的 变量 。 也 就 是 说 ， 不 应 该 只 是 一 味 地 减少 全 局 变量 的 使 用 ， 而 应 该 形成 一 种 尽 可 能 避免 使 用 较 广 的 作 
用 域 的 意识 。 对 于 较 广 的 作用 域 ， 其 问题 在 于 修改 了 某 处 代码 之 后 ， 会 难以 确定 该 修改 的 影响 范围 ， 因 
此 代码 的 可 维护 性 会 变 差 。 

转 避免 使 用 全 局 变量 

从 形式 上 来 看 ， 在 JavaScript 中 减少 全 局 变量 的 数量 的 方法 是 很 简单 的 。 首 先 我 们 按照 下 面 的 代码 这 
样 预 设 一 下 全 局 函数 与 全 局 变量 。 

// 全 局 函数 


function sum(a, b) { 
return Number(a) + Number (b); 





















































































































































// 全 局 变量 


aarposielon 2 
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再 像 下 面 这 样 ， 借 助 通过 对 象 字面 量 生成 的 对 象 的 属性 ， 将 名 称 封 和 人 对象 的 内 部 。 于 是 从 形式 上 来 


看 ， 全 局 变量 就 减少 了 。 


// 封 入 对 象 字面 量 中 
var MyModule = { 
sum: function(a, b) { 
return Number(a) + Number (pb); 




















Osone 


// 对 其 进行 调用 
js> MyModule.sum(3, 3); 
6 


js> print (MyModule .position.x); 
2 


上 面 的 例子 使 用 了 对 象 字面 量 ， 不 过 也 可 以 像 下 面 这 样 不 使 用 对 象 字 面 量 。 




















var MyModule = {}; // 也 可 以 通过 new 表达 式 生成 
MyModule.sum = function(a, b) { return Number(a) + Number (b); }; 
MyModule.position = { x:2, y:3 } 











在 这 个 例子 中 ， 方 便 起 见 ， 我 们 将 MyModule 称 为 模 决 名。 如果 完全 采用 这 种 方式 ， 对 于 1 个 文件 











来 说 ， 只 需要 1 个 模块 名 就 能 消减 全 局 变量 的 数量 。 当 然 ， 模 块 名 之 间 仍 然 可 能 产生 冲突 ， 不 过 
题 在 其 他 的 程序 设计 语言 中 也 是 一 个 无 法 被 避免 的 问题 。 

















这 一 问 


过 这 种 将 名 称 封 人 对 象 之 中 的 方法 ， 可 以 避免 名 称 冲突 的 问题 。 但 是 这 并 没有 解决 全 局 名 称 的 另 
一 个 问题 ， 也 就 是 作用 域 过 广 的 问题 。 在 上 面 的 代码 中 ， 通 过 MyModule.position.x 这 样 一 个 较 长 的 名 








， 就 可 以 从 代码 的 任意 一 处 访问 该 变量 。 
通过 闭 包 实 现 信息 隐藏 














JavaScript 语言 并 没有 提供 可 用 于 信息 隐藏 的 语法 功能 ， 不 过 灵活 运用 闭 包 之 后 ， 就 能 够 使 得 名 称 无 














法 从 外 部 被 访问 。 代 码 清单 6.11 是 个 具体 例子 。 不 过 代码 清单 6.11 的 代码 仅仅 是 为 了 对 此 说 明 ， 








实际 意义 。 
有 代码 清单 6.11 使 用 了 闭 包 的 模块 


， 在 此 调用 匿名 函数 
/ 由 于 匿名 函数 的 返回 值 是 一 个 函数 ， 所 以 变量 sum 是 一 个 函数 
wa su veelonl( 
// 无 法 从 函数 外 部 访问 该 名 称 
// 实际 上 ， 这 变 成 了 一 个 私有 变量 
// 一 般 来 说 ， 在 函数 被 调用 之 后 该 名 称 就 将 无 法 再 被 访问 
// 不 过 由 于 是 在 被 返回 的 匿名 函数 中 ， 所 以 仍 可 以 继续 被 使 用 


ar os ion (0 2 


// 同样 是 一 个 从 函数 外 部 无 法 被 访问 的 私有 变量 
// 将 其 命名 为 sum 也 可 以 。 不 过 为 了 避免 混淆 ， 这 里 采用 其 他 名 称 
function sum internall(a, b) { 
return Number(a) + Number (b); 
} 













































































/ 只 不 过 是 为 了 使 用 上 面 的 两 个 名 称 而 随意 设计 的 返回 值 
return function(a, b) { 

oleunel se SS Ve olitieeres 

return sum internal(a, b); }; 


// 调用 代码 清单 6 .11 


js> sum(3, 4); 














没有 
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代码 清单 6.11 可 以 被 抽象 为 下 面 这 种 形式 的 代码 。 在 利用 函数 作用 域 可 以 封装 名 称 ， 以 及 闭 包 可 以 
使 名 称 在 函数 调用 结束 后 依然 存在 这 两 个 特性 后 ， 信 息 隐 藏 得 以 实现 。 
(function() { 函数 体 } ) () 


像 上 面 这 样 ， 当 场 调用 匿名 函数 的 代码 看 起 来 或 许 有 些 奇怪 。 一 般 的 做 法 是 先 在 某 处 声明 冰 数 ， 之 
后 在 需要 时 调用 。 不 过 这 种 做 法 是 JavaScript 的 一 种 习惯 用 法 ， 还 请 加 以 掌握 。 

代码 清单 6.11 的 匿名 函数 的 返回 值 是 一 个 函数 ， 不 过 即使 返回 值 不 是 函数 ， 也 同样 能 采用 这 一 方 
法 。 例 如 ， 可 以 像 代 码 清 单 6.12 这 样 返回 一 个 对 象 字面 量 以 实现 信息 隐藏 的 功能 。 


上 代码 清单 6.12 将 代码 清单 6.11 的 返回 值 更 改 为 对 象 字面 量 


var obj = (function() { 
// 从 函数 外 部 无 法 访问 该 名 称 
// 实际 上 ， 这 是 一 个 私有 变量 


Vare DOSdtdon 0 :207 0 


// 这 同样 是 一 个 无 法 从 函数 外 sD 
function sum internal (a, Ml 

return Number(a) + er 
} 


// 只 不 过 是 为 了 使 用 上 面 的 两 个 名 称 而 随意 设计 的 返回 值 
return { 
sum:function(a, b) { return sum internall(a, b); pe 
KOE Ion 
















































































// 调用 代码 清单 6 . 12 


I > ope sum(e A 
党 


Si (ob 
2 


本 节 所 使 用 的 方法 ， 也 能 够 直接 被 用 于 下 一 节 中 使 用 了 闭 包 的 类 中 


转 s.7.5 闭 包 与 类 | 
5.7.3 节 已 经 对 JavaScript 的 类 的 定义 作 了 介绍 。 对 于 构造 函数 的 类 来 说 ， 存 在 以 下 问题 。 
@ 无 法 对 属性 值 进行 访问 控制 ( private 或 public 等 ) 


JavaScript 没有 与 访问 控制 有 关 的 语法 结构 。 不 过 只 要 利用 函数 作用 域 与 闭 包 ， 就 可 以 实现 访问 控 
制 。 按 照 本 节 介 绍 的 方法 ， 就 能 够 生成 无 法 变更 状态 的 不 可 变 对 象 。 相 关内 容 可 参见 5.12 节 。 

基本 的 思路 就 是 利用 上 一 节 中 提 到 的 模块 。 在 上 一 节 中 ,模块 的 函数 在 被 声明 之 后 直接 就 对 其 调 
用 ， 而 使 用 了 闭 包 的 类 则 能 够 在 生成 实例 时 调用 。 即 使 如 此 ， 这 种 做 法 在 形式 上 仍然 只 是 单纯 的 函数 声 
明 。 下 面 是 一 个 通过 闭 包 来 对 类 进行 定义 的 例子 (代码 清单 6.13 )， 这 个 类 与 5.7.3 节 中 的 代码 清单 5.9 
的 MyClass 是 等 价 的 。 
上 代码 清单 6.13 代码 清单 5.9 中 的 MyClass 的 闭 包 实现 版 本 

// 用 于 实例 生成 的 函数 


function myclass (x, y) { 
Eeturae now unetion( orne eo 
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// 通过 代码 清单 6 .13 生成 实例 


he oon mellem 


lS onsheowo. 
三 


这 里 再 举 一 个 具体 的 例子 ， 一 个 实现 了 计数 顺 功 能 的 类 ( 代码 清单 6.14 )。 请 根据 注释 来 理解 这 种 通 
过 闭 包 实现 的 类 的 结构 。 


| 代码 清单 6.14 ”实现 了 计数 器 功能 的 类 


























function counter class(init) { // 初始 值 可 以 通过 参数 设 定 
wearernte ao // 设置 默认 参数 的 习惯 做 法 ( 参见 5.5 节 ) 





// 如 有 必要 ， 可 在 此 声明 私有 变量 与 私有 函数 


nl 
风量 公司 而 法 
show uneelom nn ere (ne 
up:function() { cnt++; return this; }，// return this 在 使 用 方法 链 时 很 方便 
down:function() { cnt--; return this; } 


// 使 用 代码 清单 6 .14 的 示例 

9 en Cobar l = rero la (euleleEAY) 
js> counterl,.show(); 

0 

js> counterl.up(); 

js> Counterl.show(); 


wane oot = ee a (ee 
counter2.up() .up() .up() .show(); // 方法 链 








表达 式 闭 包 

JavaScript 种 自 带 的 增强 功能 ， 称 为 支持 函数 型 程序 设计 的 表达 式 闭 包 ( Expression closure )。 

从 语法 结构 上 来 看 ， 表 达 式 闭 包 是 函数 声明 表达 式 的 一 种 省 略 形式 。 可 以 像 下 面 这 样 省 略 只 有 return 的 
函数 声明 表达 式 中 的 return 与 人。 

var sum = function(a，b) { return Number(a) + Number(b); } 


可 以 省 略为 


Var sum = function(a, b) Number(a) + Number (b); 































































































| 6.8 | 回调 函数 设计 模式 





国 s.8.1 回调 函数 与 控制 反 转 | 
回调 函数 是 程序 设计 的 一 种 方法 。 这 种 方法 是 指 ， 在 传递 了 可 能 会 进行 调用 的 函数 或 对 象 之 后 ， 
在 需要 时 再 分 别 对 其 进行 调用 。 由 于 调用 方 与 被 调用 方 的 依赖 关系 与 通常 相反 ， 所 以 也 称 为 控制 反 转 
(IoC，Inversion of Control )。 
由 于 历史 原因 ， 在 JavaScript 开发 中 我 们 常常 会 用 到 回调 函数 这 一 方法 ， 这 是 多 种 因素 导致 的 。 第 
一 个 原因 是 在 客户 端 JavaScript 中 基本 都 是 GUI 程序 设计 。GUI 程序 设计 是 一 种 很 适合 使 用 所 谓 事件 驱 
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动 的 程序 设计 方式 。 事 件 驱 动 正 是 一 种 回调 函数 设计 模式 。 在 本 书 第 3 部 分 中 我 们 可 以 看 到 ， 客 户 端 
JavaScript 程序 设计 是 一 种 基于 DOM 的 事件 驱动 式 程序 设计 。 
第 二 个 原因 是 ， 源 于 客户 端 JavaScript 无 法 实现 多 线程 程序 设计 ”。 而 通过 将 回调 函数 与 异步 处 理 相 
结合 ， 就 能 够 实现 并 行 处 理 。 由 于 不 支持 多 线程 ， 所 以 为 了 实现 并 行 处 理 ， 不 得 不 使 用 回调 函数 ， 这 逐 
渐 成 为 了 一 种 惯例 。 最 后 一 个 原因 与 JavaScript 中 的 函数 声明 表达 式 和 闭 包 有 关 。 在 阅读 了 本 节 之 后 ， 你 
就 能 明白 具体 的 理由 。 

虽然 由 于 历史 原因 ， 在 JavaScript 中 我 们 经 常会 使 用 回调 函数 ， 但 回调 函数 并 非 JavaScript 所 独 有 的 
特性 。 笔 者 认为 ， 在 规模 达到 一 定 程度 的 程序 设计 中 ， 类 似 于 回调 函数 的 设计 模式 是 很 普遍 的 。 从 框架 
程序 设计 、 事 件 驱动 、 插 件 等 的 架构 层面 ， 到 观察 者 模式 、 模 板 方法 模式 等 设计 模式 所 在 的 代码 技巧 层 
面 ， 都 具有 一 种 类 似 的 结构 ， 即 一 种 设计 思想 的 核心 是 由 一 些 不 变 的 部 分 或 是 抽象 代码 所 组 成 的 ， 而 变 
化 的 部 分 或 具体 的 代码 ， 则 集中 于 其 外 赎 并 能 够 被 扩充 。 


国 6.8.2 JavaScript 与 回调 函数 | 


回 到 JavaScript 的 话题 。 在 此 ， 我 们 将 会 一 边 介 绍 回调 函数 的 实现 方法 ， 一边 对 其 执行 原理 进行 说 
明 。 在 本 书 第 3 部 分 之 后 会 有 一 些 实例 ， 所 以 如 果 需 要 较 贴近 实际 的 代码 ， 可 以 参考 之 后 的 相关 章节 。 
在 本 节 对 回调 函数 机 制 的 说 明 中 ， 我 们 还 会 介绍 如 何在 代码 中 使 用 回调 琐 数 。 在 实际 的 程序 设计 中 ,， 通 
常 开 发 者 只 会 实现 被 调用 方 的 代码 。 不 过 要 是 能 了 解 另 一 方 的 执行 原理 的 话 ， 应 该 也 是 会 有 所 帮助 的 。 
转 回调 函数 

代码 清单 6.15 是 简单 的 模拟 了 回调 函数 的 代码 。 需 要 预先 将 emitter 对 象 注册 ( register ) 为 回调 函 
数 。 当 onOpen 事件 发 生 时 ， 回 调 函 数 将 被 调用 ”。 对 emitter 来 说 ， 这 仅仅 是 对 注册 的 函数 进行 了 调用 ， 
不 过 根据 回调 函数 的 含义 ， 更 应 该 关注 使 用 了 emitter 部 分 的 情况 。 从 这 个 角度 来 看 ， 注 册 过 的 回调 函数 
与 之 形成 的 是 一 种 调用 被 调用 的 关系 。 


‖ 代码 清单 6.15 单纯 的 函数 型 回调 函数 


var emitter = { 
// 为 了 能 够 注册 多 个 回调 函数 而 通过 数组 管理 
Senieacksialln 
// 回调 函数 的 注册 方法 
register:function(fn) { 
ESESadloseESRDOUSIIAET IE 


} 
// 事件 的 触发 处 理 
onopen:function() { 
Eoreackh (var ten endeReallbacks) 
王国 也 
} 





































































































































































































// 使 用 代码 清单 6 .15 的 实例 
// 回调 函数 的 注册 


js> emitter.register (function() { print('event handlerl is called'); }); 


js> emitter.register (function() { print('event handler2 is called'); }); 


// 对 于 事件 发 生 的 模拟 ( 对 回调 函数 进行 调用 ) 


js> emitter.onOpen (); 








中 在 HTML5 的 Web Workers (请 参见 本 书 第 4 部 分 ) 中 客户 端 JavaScript 已 经 支持 多 线程 了 ， 不 过 这 也 是 最 近 才 开始 的 。 
@ 在 事件 驱动 的 程序 设计 方式 中 ， 对 调用 了 回调 函数 的 一 方 会 使 用 事件 分 发 (emit ) 或 事件 触发 (fire ) 这 样 的 术语 ， 而 以 前 
组 on 起 始 的 词 常常 会 被 用 于 调用 方 。 代 码 清单 6.15 的 术语 可 能 会 有 些 不 规范 , 不 过 这 么 做 是 为 了 避免 一 下 子 使 用 大 量 新 词 。 
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event handler2 is called 
国 回调 函数 与 方法 

代码 清单 6.15 的 回调 函数 只 是 单纯 的 函数 而 不 具有 状态 。 如 果 回 调 函 数 具 有 状态 ， 就 能 得 到 更 为 广 
泛 的 应 用 。 在 代码 清单 6.16 中 ， 我 们 把 回调 方 改 为 了 对 象 ， 于 是 代码 清单 6.15 中 的 emitter 变 为 了 接受 
方法 传递 的 形式 。 正 如 注释 中 所 说 ， 这 种 做 法 将 不 会 得 到 预期 的 结果 。 
| 代码 清单 6.16 ”传递 方法 的 回调 函数 ( 不 会 按 预期 的 方式 执行 ) 

// 使 用 了 代码 清单 6.15 中 的 emitter 














function MyClass (msg) { 
this.msg = msg; 
Chlsvshow Eunceilon() prinel(chismsog is ocala 


// 使 用 代码 清单 6 .16 的 实例 
// 将 方法 注册 为 回调 函数 


js> var objl = new MyClass('listener1'); 
js> var obj2 = new MyClass('listener2'); 
js> emitter.register (obj1.show); 


js> emitter.register (obj2.show); 


// 对 事件 发 生 的 模拟 ( 调用 回调 函数 ) 

js> emitter.onOpen(); 

undefined is called // 与 期 望 相 背 的 结果 ( 预期 结果 为 'listenerl is called' ) 

undefined is called pe 

在 代码 清单 6.16 中 ， 我 们 调用 回调 函数 时 无 法 正确 显示 this.msg， 错 误 原 因 在 于 JavaScript 的 方法 
内 的 this 引用 。 解 决 方法 有 两 种 ， 其 一 是 使 用 bind， 其 二 是 不 使 用 方法 而 是 用 对 象 进行 注 册 。 后 者 在 
JavaScript 中 并 不 常用 ， 我 们 将 在 之 后 的 专栏 中 介绍 。 

下 面 是 使 用 了 bind 的 实现 。 

// 使 用 了 代码 清单 6.15 中 的 emitter 

// 使 用 了 代码 清单 6.16 中 的 MyClass 


// 将 方法 注册 为 回调 函数 
js> var objl1 = new MyClass('1iSstener1') ; 
js> var obj2 = new MyClass('listener2');，; 























js> emitter.register (obj1.show.bind (obj1)); 
js> emitter.register (obj2.show.bind (obj2)); 


// 对 事件 发 生 的 模拟 ( 对 回调 函数 进行 调用 ) 
js> emitter.onOpen(); 

listenerl1 is called 

listener2 is called 


bind 是 ECMAScript 第 5 版 新 增 的 功能 ， 是 Function.prototype 对 象 的 方法 ( 参见 表 6.4 )。bind 的 作 
用 和 5.15 节 介 绍 的 apply 与 call 相同 ， 都 是 用 于 明确 地 指示 出 方法 调用 时 的 this 引用 。 对 于 函数 来 说 ， 
调用 了 bind 之 后 会 返回 一 个 新 的 函数 。 新 的 函数 会 执行 与 原 函 数 相 同 的 内 容 ， 不 过 其 this 引用 是 被 指定 
为 它 的 第 1 个 参数 的 那个 对 象 。 在 调用 apply 与 call 时 将 会 立即 调用 目标 函数 ， 而 在 调用 bind 时 则 不 会 
如 此 ， 而 是 会 返回 一 个 函数 ( 闭 包 )。 

如 果 使 用 了 apply 或 cal， 就 能 对 bind 进行 独立 的 实现 。 事实 上 ， 在 ECMAScript 第 5 版 推出 之 前 ,在 
prototypejs 等 知名 的 库 中 就 通过 apply/call 提供 了 bind 的 自己 的 实现 。 有 兴趣 的 读者 ， 可 以 参见 该 实现 。 
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国 闭 包 与 回调 函数 

最 后 我 们 将 介绍 使 用 了 闭 包 的 回调 函数 。 借 助 闭 包 ， 前 面 繁复 的 说 明 仿佛 都 不 再 存在 ， 可 以 很 轻松 
地 实现 回调 函数 ， 并 且 还 能 够 像 对 象 一 样 具有 状态 。 

// 使 用 了 代码 清单 6.15 中 的 emitter 




















// 将 闭 包 注 册 为 回调 函数 

js> emitter.register( (functio = 'Closurel'; return function() { 
print (msg + ' is called'); } ; 

js> emitter.register( (functio 'closure2'; return function() { 


print (msg + " is called'):; 


// 对 事件 发 生 的 模拟 ( 调用 回调 函数 ) 
js> emitter.onOpen (); 
Closurel is called 

closure2 is called 








专栏 


事件 侦 听 器 风格 的 实现 

在 此 我 们 介绍 一 下 Java 等 语言 中 常见 的 事件 侦 听 器 风格 的 事件 方式 ， 以 供 大 家 参考 。 这 需要 在 事件 侦 
听 器 方 对 具有 特定 名 称 的 方法 ( 以 下 记 为 MyClass 内 的 onOpen 方法 ) 进行 实现 。 有 人 认为 这 种 事先 进行 设 
计 的 做 法 很 麻烦 ， 不 过 也 有 人 认为 这 样 一 来 对 象 的 作用 就 很 明确 ， 所 以 是 一 种 很 好 的 做 法 。 从 历史 上 来 看 ， 
JavaScript 几乎 没 采 用 过 这 种 编程 方式 ( 通常 会 使 用 闭 包 来 实现 )。 




































































































































































var emitter = { 
cecallbackee ll 
register:function(obj) { 
Ehlss ealbacle ousnloDd 


onopen:function() { 
for each (var obj in this.callbacks) { 
n(nooennos 


{ 
) obj .onopen () ; // 由 于 调用 了 方法 ，this 引用 的 对 象 将 会 与 预期 结果 相同 


1 
// 事件 侦 听 器 类 


function ee { 
this.msg = ms 
// 必须 有 i 方法 的 实现 ( 与 emitter 内 的 'onOpen' in obj 相对 应 ) 
this.onOpen = function() { print(this.msg + 'is called'); } 





// 事件 侦 听 器 对 象 的 注册 

js> var ob]jl = new MyClass('listener1'); 
js> var obj2 = new MyClass('listener2'); 
js> emitter.register (obj1); 

js> emittez.zegistez(obj2) ; 


// 对 事件 发 生 的 模拟 
js> emitter.onOpen (); 
listenerl1 is called 


listener2 is called 
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数据 处 理 










本 章 总 结 数组 、JSON 人 处理、 日 期 处 理 以 及 正则 表达 式 的 相关 内 容 。 在 实际 开发 中 ， 尤 其 需要 灵 
活 运用 数组 与 正则 表达 式 。 接 下 来 ， 我 们 将 说 明 JavaScript 中 的 数据 处 理 以 及 相关 的 习惯 用 法 。 


| 7.1 | 数组 


数组 是 一 种 有 序 元 素 的 集合 。 在 JavaScript 中 ， 数 组 的 长 度 是 可 变 的 。 只 要 将 元 素 加 入 数组 的 尾部 ， 
数组 的 长 度 就 会 自动 增加 。 同 时 ， 也 能 够 自由 改写 数组 中 的 每 一 个 元 素 。 其 实 这 并 不 值得 惊讶 ， 反 而 是 
理 所 应 当 的 ， 因 为 在 JavaScript 中 数组 也 是 一 种 对 象 。 数 组 只 不 过 是 继承 了 JavaScript 的 对 象 的 一 些 性 质 
而 已 。 对 于 这 种 性 质 的 意义 ， 之 后 会 再 次 进行 说 明 。 


加 | 7.1.1 JavaScript 的 数组 | 


在 JavaScript 中 ， 数 组 可 以 通过 字面 量 与 new 表达 式 两 种 方法 生成 。 通 过 new 表达 式 的 生成 将 在 下 
一 节 中 说 明 ， 这 里 先 展 示 一 个 数组 字面 量 的 例子 。 


























// 数组 字面 量 的 例子 


SS Var oe [3 4 Sl 
ES See Che // 对 数组 进行 typeof 运算 之 后 的 结果 是 object 
object 


数组 字面 量 的 书写 方式 是 在 中 括号 ([]) 中 列 出 数组 元 素 ， 并 通过 逗号 相 分 隔 。 不 含有 元 素 的 数组 
的 长 度 为 零 。 在 JavaScript 中 ， 我 们 通常 会 先生 成 一 个 长 度 为 零 的 数组 ， 之 后 再 向 其 中 添加 元 素 。 

在 JavaScript 中 ， 我 们 可 以 将 任意 的 值 或 者 对 象 的 引用 指定 为 元 素 ， 并 且 不 需要 确保 数组 中 元 素 类 型 
的 一 致 性 。 由 于 已 经 知道 了 可 以 将 任意 类 型 的 值 赋值 给 某 一 变量 ， 因 此 或 许 大 家 不 会 对 这 一 特性 感到 惊 
讶 ， 不 过 ， 这 确实 是 与 Java 数列 的 不 同 之 处 。 在 Java 中 ， 原 则 上 同一 数组 中 的 元 素 必 须 类 型 一 致 。 一 方 
面 ，JavaScript 的 高 自由 度 确实 很 方便 ， 但 另 一 方面 也 可 能 会 造成 由 于 意外 的 数据 类 型 转换 而 引起 的 元 素 
赋值 错误 ， 所 以 对 此 请 多 加 注意 。 

// 不 需要 确保 各 个 元 素 的 类 型 一 臻 





























四 | 
Je= var avr = Ll rEoon se truer nulLle undefined; {x:3, y:4}, [ba Functlionm(a py 
{return Number(a) + Number (b);}]; 
Tse> prin tarry 
I oo Dar tu lel ob bar uneion (el 
return Number(a) + Number (b); 
} 


在 书写 数组 字面 量 时 ， 还 可 以 省 略 一 些 中 间 的 元 素 。 被 省 略 元 素 的 值 将 被 认为 是 undefined 值 。 
// 中 间 元 素 被 省 略 的 数组 











iy > he 0 i st 
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Tes er mel(ar lol a ll al 


Sundefmedns 

在 ECMAScript 中 ， 如 果 像 下 面 这 样 在 书写 数组 字面 量 时 以 逗号 作为 结尾 ， 则 该 逗号 将 会 被 忽略 。 
不 过 在 旧版 本 的 Internet Explorer 中 ， 这 一 会 引起 错误 的 原因 已 经 广为人知 了 。 因 此 ， 应 该 避免 在 数组 的 
最 后 使 用 逗号 。 

Sovar oarr = el 


js> print (arr.length); // 在 ECMAScript 标准 下 ， 将 会 忽 
员 






































国 7.1.2 数组 元 素 的 访问 | 


可 以 通过 中 括号 运算 符 ([] 运算 符 ) 来 访问 数组 的 元 素 ，[] 内 所 写 的 是 下 标的 数值 。 下 标 由 0 开始 。 
如 果 该 下 标 没有 相对 应 的 元 素 ， 则 会 获得 undefined 值 。 
// 使 用 数组 的 例子 


























IS ve on = A ol 
srrmel(aralol as lar a De 
3 4 5 undefined 


可 以 将 任何 结果 为 数值 的 表达 式 作 为 下 标 使 用 。 从 内 部 来 看 ， 作 为 下 标的 表达 式 将 被 作为 字符 串 来 
求 值 ， 然 后 以 数值 的 方式 来 使 用 。 因 此 ， 像 下 面 这 样 ， 把 能 够 被 解释 为 数值 的 字符 串 作 为 下 标 来 使 用 也 
没 问 题 。 不 过 ， 这 样 一 来 ， 代 码 的 可 读 性 会 变 差 ， 因 此 并 不 推荐 这 种 做 法 。 

// 接 之 前 的 代码 

















a ES 2 
EGGSEEIS // 访问 下 标 为 2 的 元 素 
5 


ere ar 有 全 5 册 几 几 
undefined // 需要 注意 ， 这 里 访问 的 是 arr [21] (参见 4.31 节 ) 


js> var one = { tostring:function() { return '1I7 } } 
// 该 对 象 被 转换 为 字符 串 型 之 后 结果 为 '1' 

SS orne (lanelonel 

4 


如 果 将 中 括号 运算 符 写 在 赋值 表达 式 的 左 侧 ， 则 可 以 改写 相应 的 元 素 。 
// 改写 数组 的 元 素 ( 接 之 前 的 代码 ) 

js> arr[2] = arr[2] * 2; // 改写 下 标 为 2 的 元 素 的 值 

TO 


Ss > nome (on 
ld) 


如 果 在 赋值 表达 式 左 侧 所 写 的 下 标 超过 了 元 素数 量 ， 则 会 向 数组 增加 新 的 元 素 。 新 增 的 元 素 下 标 值 
不 必 紧 接着 现 有 元 素 的 个 数 。 这 时 ， 如 果 访 问 中 间 被 跳 过 的 元 素 ， 则 会 返回 undefined 值 。 
// 接 之 前 的 代码 




















js> arr[3 


了 数量 为 3 的 时 候 ， 如 果 赋 值 给 下 标 为 3 的 元 素 ( 第 4 个 元 素 )， 就 会 新 增 一 个 元 素 。 


Se peline (lare)s 
3,4,10,20 


SS esslio) = L000 // 如 果 对 下 标 为 10 ( 第 11 个 元 素 ) 进行 赋值 ， 元 素 的 数量 就 会 变 为 11 
100 
J rmel(arre 
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Iss prine (arr length) 
并 于 


Ss>0 pm (ae 有 昌 // 如 果 访 问 被 跳 过 的 元 素 ， 则 会 返回 undefined 值 
undefined 





国 7.1.3 数组 的 长 度 | 


在 一 个 数组 之 后 写 上 点 运算 符 与 length 就 能 够 获得 该 数组 的 长 度 。 数 组 的 长 度 值 为 数组 中 最 后 一 个 
元 素 的 下 标 值 加 1。 之 所 以 用 这 样 稍 显 复杂 的 表达 方式 ， 是 因为 如 果 生 成 的 是 元 素 之 间 存 在 间隙 的 数组 ， 
元 素 的 数量 与 数组 的 长 度 不 同 。 请 看 下 面 的 具体 示例 。 


ES eu Chios SS |S oe |e 阶 
Ts> printlarr length); 

































可 





在 向 末尾 添加 了 元 素 之 后 ，length 的 值 将 会 自动 增加 ( 图 7.1 )。 如 果 在 添加 元 素 时 跳 过 了 一 些 中 间 
元 素 ，length 的 值 则 是 最 后 的 那个 元 素 的 下 标 值 减 去 1。 


图 7.1 数组 的 length 值 的 自动 计算 


js> Var arr = "zerorvn one. VEwor ly 

js> arr[arr.length] = 'three'; // 借助 arr.1length 向 数组 的 末尾 添加 元 素 是 一 种 习惯 用 法 
Ss > pnt (en) 

Zetro,one,two,three 

seinel(ar re ln // 自动 增加 

4 


js> arr[100] = 'x'; // 添加 元 素 时 跳 过 了 一 些 中 间 元 素 

js> print (arr.length); // 自动 增加 

dO 

还 可 以 显 式 地 更 改 length 的 值 (图 7.2 )。 在 进行 改写 之 后 数组 的 长 度 也 会 相应 发 生 改 变 。 如 果 该 值 
变 小 ， 超 出 部 分 的 元 素 将 被 舍 去 。 如 果 该 值 变 大 ， 新 增 部 分 的 元 素 将 是 undefined 值 。 


图 7.2 更 改 数组 的 长 度 


Bs Var ar = "I zerov Vone yy Ewor lb 

js> arr.length = 2; // 将 数组 的 长 度 缩短 
> peer) WO 她 后 个 元 垃 将 会 丢失 
pA=h oo) eT 











js> arr.length // 恢复 ( 加 长 ) 数组 至 原来 的 长 度 
js> print (arr); // 新 增 的 部 分 是 undefined 值 
Zero,one, 

js> typeof arr[2]; 

undefined 


从 内 部 来 看 ， 数 组 长 度 就 是 length 属性 ， 所 以 也 可 以 像 下 面 这 样 ， 通 过 中 括号 运算 符 对 其 访问 。 不 
过 ， 这 除了 增加 代码 长 度 之 外 没有 任何 好 处 ， 所 以 一 般 并 不 会 这 样 使 用 。 






































js> print (arr['length']); 


7.14 数组 元 素 的 枚 举 | 


for 语句 是 最 常用 的 数组 元 素 的 枚 举 方式 。 下 面 是 一 个 例子 。 
// 枚 举 数组 arr 的 所 有 元 素 的 一 种 常用 方法 


for (var i = 0, len = arr.length; i < len; i++) { 
ro tle (eee la 
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虽然 通过 for in 语句 或 for each in 语句 也 可 以 枚 举 数组 元 素 ， 但 它们 无 法 保证 枚 举 的 顺序 。 如 果 要 确 
保 枚 举 按期 望 的 顺序 进行 ， 请 使 用 for 语句 。 

除了 使 用 for 语句 这 样 的 循环 语句 (loop 语句 )， 还 有 一 些 可 以 按 顺 序 调 用 数组 中 各 个 元 素 的 方法 。 
可 以 通过 这 样 的 方法 来 实现 数组 元 素 的 枚 举 。 由 于 其 内 部 机 制 仍然 是 一 种 循环 语句 ， 所 以 也 被 称 为 内 部 
循环 。 


专栏 


数组 长 度 的 上 限 

在 ECMAScript 中 ，JavaScript 的 数组 长 度 的 上 限 是 2 的 32 次 方 。 这 与 JavaScript 中 数值 的 上 限 值 是 不 同 
的 ， 请 加 以 注意 。2 的 32 次 方 以 上 的 数值 仅 会 被 识别 为 属性 名 而 非 数值 。 因 此 ， 虽 然 看 似 能 够 使 用 大 于 2 的 
32 次 方 的 数字 来 新 增 元 素 , 但 这 并 不 是 数组 的 元 素 ,， 所 以 length 的 值 并 不 会 因此 而 自动 增加 。 如 果 超 过 了 边 
界 值 就 可 能 引发 严重 的 错误 ， 不 过 元 素数 量 超过 了 2 的 32 次 方 的 数组 非常 少见 ， 所 以 通常 来 说 无 需 对 这 一 问 
题 过 分 在 意 。 









































































































































js> var arr 


3 hoe lv lol ero (ee en) ; 
js> print (arr.length); // 数组 长 度 为 2^32-1 
4294967295 


js> arr[Math.pow(2, 32) - 1] 5 // 尽管 看 起 来 似乎 是 成 功 增 加 了 元 素 
js> print (arr.length); // 数组 的 长 度 并 没有 发 生变 化 
4294967295 


Js> Object Keys (arz) 7 
["4294967294", "4294967295"] // 2“32-1 以 属性 的 形式 存在 ， 而 没有 被 识别 为 数组 元 素 的 下 标 














ECMAScript 第 5 版 有 多 个 这 种 类 型 的 内 部 循环 方法 。 下 面 将 对 其 中 最 具 代 表 性 的 forEach 方法 进行 
介绍 。forEach 方法 的 参数 应 该 是 一 个 能 够 被 数组 中 的 各 个 元 素 调用 的 函数 ( 回调 函数 )。 

下 面 这 样 的 代码 能 够 实现 对 数组 中 所 有 元 素 的 枚 举 。 

arr.forEach (function(e) { print(e); }) 
有 三 个 参数 被 传递 给 了 回调 函数 ， 它 们 分 别 是 元 素 、 下 标 值 以 及 数组 对 象 。 下 面 是 一 个 具体 的 例子 。 
ep var Aare = zerou voner ee ewowl 


// 回调 函数 的 参数 
// 参数 e : 元 素 值 
// 参数 i : 下 标 值 

















// 参数 a : 数组 对 象 

J areoreaenl(funeclion(e ma (ort (ee 
0 zero 

1 one 

2 two 


还 可 以 将 回调 函数 内 的 this 引用 所 指向 的 对 象 指定 为 forEach 的 第 2 参数 ， 在 此 不 再 袭 述 。 
国 7.1.5 多 维 数组 | 








由 于 任意 内 容 都 可 以 被 指定 为 数组 的 元 素 ， 因 此 数组 本 身 自然 也 可 以 成 为 男 一 个 数组 的 元 素 。 某 个 
值 若 被 指定 为 了 数组 的 元 素 ， 可 以 像 下 面 这 样 ， 通 过 连续 使 用 多 个 [] 运算 符 来 访问 元 素 。 这 样 一 来 就 实 
现 了 多 维 数组 〈 细 心 的 读者 可 能 已 经 发 现 ， 数 组 甚至 还 可 以 将 其 自身 作为 该 数组 的 元 素 )。 
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// 数组 的 元 素 也 是 数组 ( 多 维 数组 ) 


svar cortiofdare i zero op une 
I pennt (en ono [ls: 
one 


国 7.1.6 数组 是 一 种 对 旬 | 


在 JavaScript 中 ， 数 组 是 一 种 对 象 。 从 内 部 来 看 ， 它 是 Array 对 象 ( Array 类 ) 的 对 象 实例 。 因 此 ， 
也 可 以 通过 new 表达 式 来 调用 Array 的 构造 函数 以 生成 数组 。 

根据 具体 情况 ， 可 以 以 不 同 的 方式 来 解释 传递 给 Array 构造 函数 的 参数 。 如 果 参 数 的 数量 为 1 且 是 
一 个 数值 ， 它 的 含义 是 数组 的 长 度 (元 素数 量 ) ;如 果 参 数 的 数量 大 于 等 于 2， 则 这 些 参数 代表 的 是 数组 
的 元 素 。 请 看 图 7.3 的 具体 例子 。 


图 7.3 调用 Array 构造 函数 的 例子 
js> var arr = new Array (5); // 对 于 参数 只 有 1 个 的 情况 ， 该 参数 将 会 成 为 数组 的 长 度 


SS pintl(arml 









































js> var arr = new Array(3,4，'foo'); ”// 参数 将 会 成 为 数组 的 元 素 
Ss > pmt (Ca 
S34 OG 


js> var arr = new Array 


7 由 于 不 会 发 生 隐 式 的 数据 关 转换 看 将 该 参数 转换 为 数值 类 型 ， 因 此 这 一 参数 将 被 认为 是 数组 中 下 标 为 0 的 元 素 


Ss > pmt (or) 
5 


虽然 前 文 介绍 了 通过 new 表达 式 生成 数组 的 方式 ， 不 过 ， 如 果 没 有 特别 的 理由 ， 最 好 还 是 使 用 字 
面 量 表达 式 来 生成 数组 ， 因 为 通过 字面 量 的 表达 方式 更 为 简单 。 通 过 数组 字面 量 表达 式 生成 的 数组 也 是 
Array 的 实例 对 象 ， 可 以 像 下面 这 样 对 这 一 点 进行 确认 。 


SEE // 通过 数组 字面 量 来 生成 数组 对 象 
js> act.consttructor; // 实际 上 这 与 通过 new Array () 所 生成 的 对 象 没 有 区 别 
function Array() { 
[native codel] 
} 


在 通过 new 表达 式 生 成 数组 时 ， 根 据 参 数 数量 的 不 同 ， 参 数 的 含义 也 会 发 生 改 变 ， 而 这 常常 会 引起 
错误 。 为 了 避免 发 生 预 料 之 外 的 错误 ， 我 建议 不 要 使 用 这 一 方式 。 不 过 在 一 些 特定 情况 下 ， 使 用 new 表 
达 式 反而 更 好 。 例 如 ， 在 生成 数组 的 同时 指定 数组 长 度 时 ，new 表达 式 更 为 方便 。 
举例 来 说 ， 通 过 数组 字面 量 来 生成 一 个 元 素数 量 为 100 且 每 个 元 素 的 值 都 未 定 的 数组 ， 虽 然 也 并 非 
无 法 做 到 ( 需要 在 [] 内 书写 100 个 ), 但 会 非常 麻烦 。 这 时 最 好 使 用 new 表达 式 。 此 外 ， 由 于 在 新 增 元 素 
时 数组 的 长 度 将 会 自动 增加 ， 所 以 并 不 一 定 要 在 生成 数组 的 同时 指定 数组 的 长 度 。 之 所 以 要 求 同 时 指定 数 
组 的 长 度 ， 一 方面 是 为 了 提高 执行 效率 ， 另 一 方面 是 为 了 使 数组 的 意义 更 为 明确 从 而 提高 代码 的 可 读 性 。 

下 面 是 对 数组 对 象 的 方法 进行 调用 的 例子 。 关 于 其 他 一 些 可 以 被 调用 的 方法 ， 请 参见 之 后 的 7.1.7 节 。 

// 对 数组 对 象 的 方法 进行 调用 的 例子 


































































































a eu ee ely wo']; 
站 三 GT 于 // 对 join 方法 进行 调用 


ZeZOoneEwWo" 


TE lam a Bleata0 OR // 也 可 以 直接 对 数组 字面 量 进行 方法 调用 
4 5 
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中 括号 运算 符 在 这 里 的 作用 是 用 于 访问 数组 的 元 素 ， 其 实 ， 这 就 是 在 访问 对 象 的 属性 。 也 就 是 
说 ， 从 内 部 来 看 ， 下 标 值 0 或 1 之 类 的 数值 其 实 是 数组 对 象 的 属性 名 。 可 以 像 图 7.4 中 那样 通过 多 种 手 
段 确认 。 

在 图 7.4 中 可 以 看 到 ，length 也 是 属性 名 之 一 。 不 过 for 语句 并 不 会 对 其 枚 举 。 这 是 因为 length 属性 
的 enumerable 这 一 属性 为 假 。 关 于 enumerable 属性 ， 请 参见 5.10 节 。 


















































图 7.4 数组 的 属性 
> var grr zerou nn one TEweoul: 


SE orar nr a eel 下 标 值 的 枚 举 ， 即 属性 名 的 枚 举 


js> Object .keys (arr); 属性 名 的 枚 举 
Bw 和 四 v2n] 


js> Object .getOwnPropertyNames (arr); 属性 名 的 枚 举 ( 忽略 enumerable 属性 ) 
riength", TOn， WT n27] 


3 对 下 标 0 是 否 存 在 进行 检验 
EUE 


js> 0 in arr; 数值 0 将 会 被 转换 为 字符 串 型 '0' 以 进行 检验 


J en coup 对 下 标 3 是 否 存在 进行 检验 
false 


js> 'length' in arr; // 对 Length 属性 是 否 存 在 进行 检验 

true 

5.9 节 已 经 说 明了 在 JavaScript 将 对 象 作为 关联 数组 使 用 的 情况 。 如 果 以 这 种 方式 来 解释 的 话 ， 
JavaScript 中 的 数组 就 可 以 被 看 作 键 值 恰巧 是 连续 数值 的 关联 数组 。 此 外 需要 说 明 的 是 ， 如 果 没有 以 正 整 
数 对 一 个 数组 对 象 进行 中 运算， 该 值 就 会 被 解释 为 属性 名 ， 而 进行 属性 访问 操作 。 请 看 下 面 的 例子 。 

Te Var Alr mo ero OMe wo ls 

Ele be oe b // 向 数组 对 象 中 添加 属性 x 


I> fore(var i Mm arr orinel(e 
0 




















a 
虽 
x 




















之 后 的 7.1.8 节 将 再 次 说 明 数 组 对 象 所 具有 的 意义 。 


围 7.1.7 Aray 类 | 
Array 类 是 一 种 作为 数组 对 象 使 用 的 类 。 表 7.1 总 结 了 Array 类 的 函数 以 及 构造 函数 调用 。 
表 7.1 Array 类 的 函数 以 及 构造 函数 调用 












































Arrayl[itemo, item1, …]) 将 参数 作为 元 素 以 生成 数组 实例 
new Arrayl[itemo, item1, …]) 将 参数 作为 元 素 以 生成 数组 实例 
Arrayllen) 生成 一 个 以 参数 len 为 长 度 的 数组 实例 
new Arrayllen) 生成 一 个 以 参数 len 为 长 度 的 数组 实例 


























表 7.2 总 结 了 Array 类 的 属性 。 可 以 通过 例如 Array.isArray(arg) 的 形式 使 用 。 
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表 7.2 Array 类 的 属性 




























































































































































































属性 名 说 明 
prototype 于 原型 链 
length 值 为 1 
isArray(arg) 如 果 参 数 arg 是 一 个 数组 实例 则 返回 真 
表 7.3 总 结 了 Array.prototype 对 象 的 属性 。 
表 7.3 Array.prototype 对 象 的 属性 
属性 名 说 明 
constructor 对 Array 类 对 象 的 一 个 引 
: : 把 参数 作为 元 素 加 入 某 一 数组 并 生成 新 的 数组 。 如 果 参 数 本 身 就 是 一 个 数组 ， 则 
concat([itemo, item1, ...]) 将 这 两 个 数组 连接 
every(callbackfn[, thisArg]) 依次 对 数组 中 的 各 个 元 素 应 用 callbackfn 函数 。 在 callbackfn 返回 false 之 后 终止 
filter(callbackfn[, thisArg]) 依次 对 数组 中 的 各 个 元 素 应 用 callbackfn 函数 ， 并 返回 函数 的 返回 值 为 true 的 元 
ES 素 所 组 成 的 新 的 数组 
forEach(callbackfnl, thisArg]) 依次 对 数组 中 的 各 个 元 素 应 用 callbackfn 函数 
返回 第 一 个 与 searchElement 一 致 的 元 素 的 下 标 。 也 可 以 通过 第 2 参数 来 设置 检 








indexOf(searchElement, [fromlndex]) 














索 的 起 始 下 标 。 如 果 没有 找到 相符 的 结果 ， 则 返回 -1 
join(separaton) 在 数组 的 元 素 之 间 加 入 分 隔 符 之 后 生成 相应 的 字符 串 什 

从 后 向 前 检索 , 返回 第 一 个 与 searchElement 一 致 的 元 素 的 下 标 。 也 可 以 通过 第 
2 参数 来 设置 检索 的 起 始 下 标 。 如 果 没 有 找到 相符 的 结果 ， 则 返回 -1 
































lastIndexOf(searchElementl, fromlndex]) 


























































































































maplcallbackfnl, thisArg]) 依次 对 数组 中 的 各 个 元 素 应 用 callbackfn 函数 ， 返 回 元 素 为 函数 结果 的 新 的 数组 
pop!() 删除 数组 中 最 后 一 个 元 素 后 返回 该 数组 
pushl[litemo0, item1, …]) 将 参数 添加 至 数组 的 末尾 

将 数组 的 各 个 元 素 与 之 前 的 函数 调用 结果 作为 参数 ， 依 次 应 用 callbackfn 函数 ， 








reducel(callbackfnL initialValue]) 

















并 返回 函数 调用 的 最 终结 果 









































































































































































































































reduceRight(callbackfnl, initialValue]) 从 数组 的 末尾 开始 向 前 执行 reduce 操作 
reverse!l) 性 数组 中 的 元 素 逆 序 置 换 
Shift() 除数 组 中 的 第 一 个 元 素 后 返回 该 数组 
slice(start, end) 生成 一 个 下 标 由 start 起 至 end 的 元 素 所 组 成 的 新 的 数组 
依次 对 数组 中 的 各 个 元 素 应 用 callbackfn 函数 。 如 果 callbackfn 的 结果 为 true, 则 
somel(callbackfnl, thisArg]) 终止 
sort(comparefn) 将 数组 中 的 元 素 排 序 
soleltart delCoun lomo ori UT 始 的 delCount 个 元 素 。 如 果 指 定 了 第 3 个 参数 ， 则 将 该 参数 
toLocaleString() 将 数列 转换 为 与 地 区 相关 的 字符 串 值 类 型 
toSourcel) JavaScript 自 定义 的 增强 功能 。 求 值 结果 将 返 世 函数 进行 生成 的 字符 串 。 
toString( 将 数组 转换 为 字符 串 值 类 型 
unshift([item0, item1, -…]) 每 元 素 添加 至 数组 的 头 部 






































在 表 7.4 中 对 Array 类 的 实例 属性 进行 了 总 结 。 
表 7.4 Array 类 的 实例 属 


几 


性 














0 以 上 的 整数 值 数组 元 素 
length 数组 的 长 度 











国 7.1.8 数组 对 象 的 意义 | 


7.1.6 节 已 经 提 到 过 数组 是 一 种 对 象 ， 且 用 于 元 素 访问 的 下 标 值 是 其 相应 的 属性 名 。 
那么 ， 像 下 面 这 样 ， 通 过 对 象 字面 量 生成 的 对 象 和 数组 是 否 是 等 同 的 呢 ? 


js> var fake arr = { 0:'zero', 1:'one', 2:'two', length:3 }; // 这 与 fake arr = 
['zero'!，'one'，'two'] 是 否 相同 ? 









































js> print (fake arr[1]); // 在 这 条 语句 中 ， 这 两 者 貌似 是 一 样 的 


one 
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结论 就 是 ， 上 面 的 这 一 对 象 (关联 数组 ) 并 不 是 数组 。 

第 一 个 不 同 点 在 于 length 属性 的 enumerable 属性 。 

另 一 个 不 同 点 则 是 数组 的 length 属性 的 值 会 自动 增加 。 对 于 数组 来 说 ， 在 新 增加 元 素 时 ，length 属 
性 将 会 自动 增加 。 通 过 push 方法 或 unshift 方法 来 增加 元 素 ， 也 能 使 上 述 的 fake_arr 对 象 产生 相同 的 结 
果 ， 但 仅 通过 对 元 素 赋值 ， 则 无 法 实现 增加 length 属性 的 值 的 效果 。 
































国 7.1.9 数组 的 习惯 用 法 | 
本 节 介 绍 与 数组 有 关 的 多 种 习惯 用 法 。 
国 排序 








可 以 通过 sort 方 法 对 数组 的 元 素 值 进行 排序 。 如 果 不 使 用 参数 来 调用 sort 方法 ， 则 会 将 其 作为 字符 
串 进行 排序 。 当 以 字符 串 的 形式 进行 排序 时 ， 排 序 是 通过 对 Unicode 的 编码 值 的 大 小 比较 来 实现 的 。 大 
小 比较 的 规则 请 参见 3.3.3 节 。 下 面 是 个 具体 例子 。 


SEP Var rr = noneu two oI rheeer fo Iriver oll 











~ 


ea or 
["five" 3 nmnfourn nonen ngix" . ntLhtreen "two"] 


排序 之 后 ， 数 组 将 改变 。 之 后 我 会 说 明 这 一 特性 的 意义 。 
如 果 要 以 字符 串 之 外 的 方式 对 数组 进行 排序 ， 则 需要 将 比较 函数 作为 参数 传递 给 sort 方法 。 如 果 是 





























一 个 由 数值 组 成 的 数组 ， 则 可 以 使 用 下 面 的 比较 函数 。 使 用 默认 的 字符 串 排序 方式 对 数值 进行 排序 时 ， 
昌 然 对 于 个 位 数 的 数值 可 以 获得 预期 的 结果 。 但 是 也 会 产生 10 比 2 更 小 这 样 的 结果 ( 请 确认 '10>'2 的 
结果 )。 因 此 需要 注意 ， 不 能 仅仅 因为 字符 串 形 式 的 排序 在 个 位 数 的 情况 下 能 得 到 正确 的 结果 ， 而 误 以 为 
它 也 适用 于 所 有 的 数值 排序 。 

// 数值 组 成 的 数组 的 排序 


a he Coe on i Cop oro oo ss | 





























je rr ore(eunetiona era 1 
[SEO 





数组 中 的 每 个 元 素 都 会 在 排序 时 ， 调 用 被 传递 至 sort 方法 的 参数 的 比较 函数 。 函 数 在 接受 了 两 个 元 
素 的 值 之 后 将 会 返回 比较 的 结果 。 以 x 与 y 为 例 ， 如 果 x 比 y 大 ， 则 会 返回 正 值 。 也 就 是 说 ， 如 果 排 序 
时 x 在 y 之 后 出 现 ， 则 会 返回 一 个 正 值 ”。 反 之 则 会 返回 一 个 负 值 。 如 果 值 的 顺序 相同 ， 则 会 返回 0。 

上 面 的 说 明 可 能 会 不 容易 理解 ， 总 之 对 于 数值 的 情况 ， 如 果 返 回 上 面 这 样 的 减法 运算 结果 ， 就 能 够 
获得 符合 的 结果 了 。 

sort 方 法 在 调换 元 素 时 会 对 这 一 数组 进行 改变 。 改 写 目 标 对 象 的 方法 被 称 为 破坏 性 的 方法 。 在 
JavaScript 中 ， 数 组 含有 很 多 破坏 性 的 方法 。 下 面 这 些 都 是 破坏 性 的 方法 。 


® pop、push、 reverse、 shift、sort、splice、unshift 


如 果 只 了 解 JavaScript， 有 可 能 会 想当然 地 认为 数组 元 素 顺 序 发 生 改 变 是 理 所 应 当 的 。 然 而 ， 不 对 目 
标 数组 进行 更 改 而 完成 排序 ， 并 返回 一 个 新 的 数组 的 非 破坏 性 的 实现 方式 也 是 存在 的 。 通 常 来 说 ， 破 坏 
性 的 方法 很 容易 引起 错误 , 所 以 应 尽 可 能 避免 使 用 ”。 此 外 , 可 以 使 用 在 5.12 节 介绍 的 freeze 方法 来 防止 
数组 发 生意 外 改变 。 
























































使 用 sort 方法 对 被 freeze 的 数组 排序 的 话 ， 会 像 下 面 这 样 引发 错误 。 


| we 1 1 1 T 1 四 
, / 7 
js> var arrt es [one two three 





E>) Tels 








QD 准确 地 说 ， 这 是 升序 排列 。 通 常 而 言 ， 默 认 的 排序 方式 都 是 升序 排序 。 
@ 破坏 性 的 方法 也 有 其 优点 ， 即 效率 较 高 。 其 内 存 利 用 效率 确实 会 更 好 ， 因 而 速度 也 会 较 快 。 
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eS or or 





TypeError: arr.sort() is read-only 


转 通过 数组 来 生成 字符 串 
接 下 来 ,我们 将 介绍 一 种 通过 push 与 join 的 组 合 来 生成 字符 串 的 常用 方法 。 可 以 通过 数组 来 实现 将 









































字符 串 一 部 分 一 部 分 地 拼接 起 来 ， 生 成 一 个 新 的 字符 串 。 将 每 一 个 部 分 的 字符 串 全 都 push 至 数组 之 后 ， 
通过 join 将 它们 拼接 成 一 个 字符 串 。 大 家 普遍 认为 ， 这 种 方法 比 通过 字符 串 拼 接 运 算 〈+ 运算 或 是 += 运 
算 ) 更 为 迅速 。 

不 过 ， 运行 速度 会 随 着 具体 的 实现 而 有 所 不 同 ， 因 此 也 不 能 盲目 认为 这 种 方法 的 性 能 更 好 。 如 有 必 
要 ， 还 是 亲自 测量 速度 为 好 。 不 过 由 于 现在 主流 的 观点 都 认为 该 方法 性 能 更 优 ， 所 以 很 多 现 有 的 代码 都 















































采用 了 这 种 方法 。 因 此 ， 即 使 并 不 需要 使 用 该 方法 ， 也 有 必要 读 懂 其 含义 。 下 面 是 个 具体 例子 。 


Te ver or 
"Js> arr push( aadLv>")y 
js> arr.push (Date () ) ; 





js> arr.push("</divS>"),; 
> rr jl 
"<div>Sun May 22 2011 14:29:01 GMT+0900 (JST)</div>" 


join 的 参数 是 在 拼接 字符 串 时 用 于 分 隔 每 个 部 分 的 字符 。 在 上 面 的 例子 中 传递 了 一 个 空 字符 ， 所 以 
实际 上 没有 用 到 分 割 字符 。 如 果 不 传递 给 join 参数 ， 则 默认 的 分 割 字 符 是 逗号 字符 。 

与 join 相对 应 的 逆转 换 是 String 类 的 split 方法 。 它 根据 分 割 字符 将 字符 串 分 割 ， 之 后 将 每 一 部 分 的 
字符 串 作为 元 素 加 入 数组 ， 并 将 该 数组 返回 。split 的 第 1 个 参数 是 用 于 表示 分 割 字符 的 字符 串 值 ， 也 可 
以 使 用 正则 表达 式 。 

下 面 是 一 个 以 空格 作为 分 割 字符 来 生成 数组 的 具体 例子 。 

Js> var str = VSun MayT227201 LS5 04CGMTTHODOO0USDEJ ry 


J Ee oe // 通过 空格 对 字符 串 进行 分 割 | 
["sun", "May", "22", "2011", "14:45:04", "GMT+0900", "(JST)"] 












































Stns (Ne // 通过 空格 ( 以 正则 表达 式 的 形式 ) 对 字符 串 进行 分 割 

OO 
图 数组 的 复制 

下 面 我 们 来 考虑 数组 的 复制 。 在 很 多 情况 下 ， 与 复制 及 破坏 性 的 方法 相关 的 错误 非常 常见 ， 想 必 很 
多 人 都 曾经 遇 到 过 。 数 组 也 不 例外 。 

由 于 在 数组 的 赋值 时 代入 的 只 是 其 引用 ， 因 此 实际 上 并 没有 复制 数组 的 元 素 。 仅 仅 是 将 某 一 个 变量 
指向 了 同一 个 数组 实体 而 已 。 因 为 数组 是 一 种 对 象 ， 所 以 这 一 结果 是 必然 的 (参见 5.2 节 )。 下 面 是 一 个 
具体 例子 。 


四 | 

js> var arr2 = arr; // 从 变量 arr2 的 角度 来 看 ， 它 含有 和 arr 相同 的 元 素 
js Blin (ar 

医生 

















as2llol 02ey // 通过 变量 arr2 来 修改 数组 的 元 素 
Is> print(arr) // 在 变量 arr 处 也 能 反映 出 这 一 修改 
2 ya 


如 果 要 复制 数组 的 元 素 ， 可 以 使 用 concat 方法 或 slice 方法 。 
下 面 我 将 分 别 为 大 家 介绍 使 用 concat 方法 与 slice 方法 的 实例 (图 7.5、 图 7.6 )。 


图 7.5 通过 concat 方法 对 数组 进行 复制 


EE ee Che | op wl 








Ms var arr2 = [| eoneat larr)y 
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IE // 从 变量 arr2 的 角度 来 看 ， 它 含有 和 arr 相同 的 元 素 
,4 


Eb 通过 变量 arr2 来 修改 数组 的 元 
print (arr); arr 处 没有 发 生变 化 ( 对 元 来 进行 了 复制 ) 
,4 





| 7.6 ”通过 slice 方法 对 数组 进行 复制 


wa on 

Vartarr2 ss artaslliecel0r arr lengehy; 

print (arr2); // 从 变量 arr2 的 角度 来 看 ， 它 含有 和 arr 相同 的 元 素 
区 


lS> eae2l0l 2 / 通过 变量 arr2 来 修改 数组 的 元 素 

eS rie / 在 变量 arr 处 没有 发 生变 化 ( 因为 对 元 素 进行 了 复制 ) 

3,5,4 

通常 ， 对 于 对 象 或 数组 实体 的 复制 ， 有 深 复 制 与 浅 复制 两 种 方式 。 

深 复制 是 一 种 完全 的 复制 。 如 果 该 对 象 的 属性 还 引用 了 其 他 对 象 ， na 一 起 被 复制 。 

而 浅 复制 则 只 会 复制 属性 值 以 及 元 素 值 ， 并 不 会 复制 相关 的 引用 对 象 。 通 过 concat 以 及 slice 进行 的 
复制 都 是 浅 复制 。 可 以 通过 下 面 的 方式 确认 。 


ves Eu Ss [| (e522) Wl 该 数组 的 元 素 是 某 个 对 象 的 引用 
var arr2 = [] .concat (arr); // 通过 concat 复制 元 素 

Eee2 |] ee lee )/ 闪 六 县 萤 < 2 次 的 殉 来 所 引用 的 对 旬 
Beinel(arelol x) // 在 变量 arr 处 也 能 反映 出 这 一 修改 ( 这 是 一 种 浅 复制 ) 









































如 果 需 要 使 用 深 复 制 ， 则 需要 自己 实现 。 不 过 在 实际 使 用 中 几乎 没有 必须 使 用 深 复制 的 情况 
转 元 素 的 删除 
如 果 要 删除 数组 中 的 元 素 ， 可 以 使 用 delete 运算 。 不 过 ， 通 过 delete 删除 了 元 素 之 后 ， 被 删除 的 地 


方 会 留 下 所 滑 的 空 s 余 元 素 。 如 果 要 将 进行 了 元 素 删除 操作 后 的 数列 中 的 空 队 消 除 ， 可 以 使 用 splice 方法 。 
请 看 图 7.7 中 的 示例 。 


7.7 元素 的 删除 ( splice 方法 ) 


I var arm meroL one 1 0 two Eh 
js> delete arrl[l2]; // 如 果 仅 仅 通过 i 进 生 卉 除 操作 
EE // 下 标 为 2 的 位 置 将 会 留 有 空位 


Zero,one, ,two,three 

















> encaseel( 2 1 // 从 下 标 为 2 的 位 置 起 删除 1 个 元 素 

ed // 前 面 删除 数列 的 元 素 后 留 下 的 空位 被 除去 了 
图 筛选 处 理 

7.1.4 节 已 经 介绍 过 了 forEach 方法 。 并 不 应 该 去 关注 对 元 素 进行 枚 举 的 这 一 过 程 ， 而 应 该 将 数组 看 
作 集合 了 各 种 成 员 的 单一 的 对 象 ， 将 枚 举 视 为 对 该 对 象 进行 的 一 种 操作 。 

将 原来 的 集合 看 作 输入 ， 而 将 之 后 生成 的 集合 看 作 输出 的 话 ， 这 一 操作 也 可 以 被 看 作 一 种 函数 。 从 
某 种 意义 上 来 说 ， 它 与 函数 之 间 只 有 表现 形式 上 的 差别 而 已 。 不 过 ， 这 种 表现 形式 的 差别 也 是 很 重要 的 。 
如 果 换 一 个 角度 看 问题 ， 把 这 看 作 一 种 变换 处 理 ， 就 会 发 现 不 仅 有 能 够 用 于 枚 举 数 组 元 素 的 for 循环 操 
作 ， 还 有 能 够 用 于 筛选 处 理 以 及 流水 线 处 理 的 相关 操作 。 

对 于 筛选 处 理 或 流水 线 处 理 ， 如 果 将 其 分 为 多 级 进行 会 比较 方便 。 可 以 通过 链 式 语 法 来 实现 数组 方 
法 的 多 级 处 理 。 下 面 是 一 个 随意 设计 的 使 用 示例 ， 并 没有 提供 什么 实际 的 功能 。 









































JS var arr = zero, "One Mewes cheeeur Eour sl]y 
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// map: 该 操作 将 元 素 字符 串 的 长 度 作为 新 的 元 素 并 转换 为 数组 
// filter: 该 操作 将 筛选 出 元 素 中 值 为 偶数 的 部 分 


js> arr.map (function(e) { return e.length; }).filter(function(e) { return e % 2 == 0; }); 
El 


从 表 7.3 中 可 以 看 到 ， 有 很 多 方法 都 可 以 用 于 这 样 的 筛选 处 理 。 有 人 将 这 些 方 法 称 为 迭代 器 类 方法 。 
如 果 不 想 通 过 循环 的 方式 来 实现 对 数组 元 素 的 枚 举 ， 还 可 以 考虑 一 下 是 否 能 够 使 用 这 种 类 型 的 方法 。 

这 种 方法 的 优点 之 一 是 代码 将 变 得 更 为 简洁 。 还 有 一 个 优点 就 是 这 样 的 方法 能 够 使 开发 者 对 破坏 性 
的 方法 更 为 敏感 ， 在 使 用 时 更 加 谨慎 。 这 是 如 果 因 为 要 在 筛选 处 理 中 使 用 链 式 语 法 ， 就 应 该 避免 使 用 破 
坏 性 的 方法 。 
































国 7.1.10 数组 的 内 部 实现 | 


在 JavaScript 以 外 的 很 多 语言 中 ， 数 组 将 会 隐 式 地 占用 一 段 连续 的 内 存 空间 。 这 种 隐 式 的 内 部 实现 ， 
使 得 高 效 的 内 存 使 用 以 及 高 速 的 元 素 方法 成 为 可 能 。 然 而 ,在 JavaScript 中 ， 数 组 的 实体 是 一 个 对 象 ， 所 
以 其 通常 的 实现 方式 并 不 是 占用 一 段 连续 的 内 存 空 间 。 

如 果 你 有 其 他 程序 设计 语言 的 开发 经 验 ， 或 许 会 担心 JavaScript 中 数组 的 执行 效率 是 否 比较 低 。 其 
实 JavaScript 中 的 数组 是 否 会 使 用 连续 的 内 存 空间 ， 取 决 于 具体 的 实现 方式 。 与 其 他 那些 确实 是 使 用 了 
连续 内 存 空间 的 程序 设计 语言 相 比 ，JavaScript 的 数组 效率 的 确 会 有 些 让 人 担心 ， 不 过 实际 上 ， 所 有 的 
JavaScript 实现 都 为 了 提高 其 自身 的 性 能 而 各 自 花 了 不 少 的 功夫 。 

对 比 一 下 代码 清单 7.1 与 代码 清单 7.2， 我 们 就 能 够 对 不 同 实现 方式 中 数组 的 内 部 实现 进行 一 定 程度 
的 推测 。 顺 便 说 明 一 下 ， 这 里 的 代码 中 的 1e7 表示 10 的 7 次 方 。 指 数 形式 的 数值 字面 量 ( 参见 表 3.6 ) 
在 性 能 测试 类 的 代码 中 很 有 用 ， 记 住 其 使 用 方式 的 话 会 方便 很 多 。 

有 代码 清单 7.1 访问 大 量 的 数组 元 素 


var Aary = ls 
H(i 
or 
















































































OR 
} 
上 代码 清单 72 代码 清单 7.1 的 对 象形 式 


a er // 对 象 
Fo (a 0 
oemlasle uu 


} 

根据 实现 方式 的 不 同 ， 代 码 清单 7.1 与 代码 清单 7.2 之 间 的 执行 速度 会 有 所 差异 。 这 其 实 是 数组 是 
否 使 用 了 连续 的 内 存 空 间 的 一 种 体现 。 然 而 ， 如 果 数 组 在 内 部 总 是 使 用 连续 的 内 存 空间 ， 下 面 的 代码 
就 应 该 会 占用 多 达 GB 量 级 的 连续 内 存 。 不 过 在 一 般 的 实现 方式 中 ， 这 样 的 情况 是 不 会 发 生 的 。 


加 | 二 Ps 本 一 
































js re 00s // 如 果 数 组 确实 占用 了 连续 的 内 存 空间 的 话 ， 应 该 会 消耗 大 量 的 内 存 
在 流行 的 JavaScript 实现 中 ， 小 型 的 数组 (下 标 值 较 小 的 部 分 ) 会 占用 连续 的 内 存 空间 ， 而 下 标 值 较 


























大 的 部 分 ， 则 一 般 会 以 类 似 于 对 象 的 属性 的 方式 进行 处 理 "。 

此 外 ， 在 JavaScript 中 ， 也 有 人 提出 需要 增加 Int32Array 或 Int8Array 这 类 自 定义 增强 功能 ， 一 并 备 
注 于 此 (请 参见 下 面 的 链接 )。 

https://developer.mozilla.org/en/JavaScript_ typed arrays 








中 不 过 说 到 底 ， 还 是 要 看 具体 的 实现 方式 。 
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国 7.1.11 数组 风格 的 对 象 | 


7.1.8 节 已 经 说 明 过 ， 从 使 用 的 角度 来 看 ， 属 性 名 是 数值 的 对 象 与 数组 (无论 其 内 部 实现 是 怎样 的 ) 
差别 很 小 。 在 JavaScript 中 ， 有 一 种 不 是 数组 却 具 有 数组 风格 的 对 象 。 其 中 较为 有 名 的 是 可 以 用 于 访问 函 
数 实 参 的 arguments 对 象 。 在 DOM 的 API 中 ， 数 组 风格 的 对 象 也 有 很 多 。 

由 于 可 以 通过 for 语句 来 枚 举 数组 风格 的 对 象 中 的 元 素 ， 所 以 在 这 方面 这 种 类 型 的 对 象 与 数组 的 用 法 相 
同 。 一 般 来 说 ， 虽 然 不 能 使 用 Array 类 的 方法 ， 但 借助 JavaScript 自 定 义 的 增强 功能 ( JavaScript1.6 )， 可 以 对 
满足 以 下 条 件 的 对 象 ( 即 数组 风格 的 对 象 ) 以 类 似 于 类 方法 调用 的 形式 来 使 用 Array 类 的 方法 (图 7.8 )。 

@ 对 象 具 有 length 属性 

@ 对 象 具有 数值 属性 





























7.8 ”对 数组 风格 的 对 象 调用 Array 类 的 方法 ( JavaScript 的 自 定义 功能 ) 


js> var fake arr = { 0:'zero'， 1:'one'，2:'two'，length:3 }; // 数组 风格 的 对 象 


js> fake arr.join(','); // 以 一 般 的 方式 调用 Array 类 的 方法 将 会 发 生 错误 
TypeError: fake arr.join is not a function 


J Array oi(Eare ar .0 // 以 类 方法 调用 的 形式 使 用 Array 类 的 方法 


"Zero,one,two" 


js> Array.push (fake arr,，'three'); // 使 用 了 push 之 后 length 属性 也 会 自动 增加 
SE osu el(iee be a laarenelny) 

4 

Ie Mrav on(Eakenare AL 

"Zero, one,two, three" 


此 外 还 有 下 面 这 样 的 更 具有 广泛 性 的 解决 方案 。 


js> Array.prototype.join,.call (fake arr, ',! 





"Zero,one,two" 





转 7.1.12 送 代 器 | 


迭代 吉 (Iterator ) 这 一 概念 并 不 是 JavaScript 专 有 的 ， 在 其 他 的 程序 设计 语言 中 也 有 这 一 概念 。 简 单 
来 说 ， 和 迭代 需 是 一 种 专门 为 循环 操作 而 设计 的 对 象 。 

不 那么 严格 地 说 ， 专 门 为 某 种 操作 而 设计 出 一 种 功能 的 方式 可 以 被 称 作 抽象 化 。 而 程序 设计 语言 中 
的 迭代 器 ， 就 是 一 种 对 循环 操作 进行 了 抽象 化 而 得 到 的 功能 。 对 循环 操作 进行 抽象 化 之 后 就 能 发 现 ， 只 
有 继续 对 下 一 个 对 象 进行 处 理 的 功能 是 必需 的 。 也 可 以 理解 成 需要 从 一 个 有 各 种 元 素 的 集合 中 取出 下 一 
个 所 需 的 元 素 。 

在 JavaScript 中 有 Iterator 类 这 样 一 个 自 定义 增强 功能 。 可 以 通过 构造 函数 调用 或 Iterator 函数 的 调用 
来 生成 一 个 对 象 实例 。 这 时 ， 需 要 将 想 要 枚 举 的 目标 对 象 传递 给 它 的 第 1 参数 。 

下 面 是 一 个 具体 的 例子 。 之 后 还 将 会 说 明 第 2 参数 的 含义 。 









































// 和 迭代 器 对 象 的 生成 方法 


SS ver qn lh zerou one pp two 
js> var it = new Iteratorl(arr, true); XW 如 相 以 使 用 EN 二 Teerator(arr crue) 


在 迭代 咒 对 象 中 含有 一 个 next 方法 。next 方法 能 够 从 (对象 ) 元 素 的 集合 中 返回 下 一 个 所 需 的 元 素 。 
这 时 ， 根 据 Iterator 的 构造 函数 的 第 2 参数 中 的 旗 标 的 设置 不 同 ， 结 果 也 会 有 所 不 同 。 其 具体 的 差别 请 参 
见 图 7.9。 
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图 7.9 和 迭代 器 的 使 用 示例 
ss var are = [moro vomne ll vewo ls 


// 仅 返 回 键 ( 第 2 参数 为 true ) 

js> var it = new Iteratorl(arr, true); 

js> it.next (); 

non 

SS CE nexEl 

nn 

J Tt next() 

mon 

J it nexel() 

bbeket=ible jel o>.4el=] oh ese) on -Yea oie) oh eo 


// 同时 返回 键 值 对 ( 第 2 参数 为 false ) 

js> var it = new Iteratorl(arr, false); 
Te lt nexel() 

[0, 'zZero'] 

Ts> TE mexel) 

[1, 'one'] 

J ie next(y 

| | 

js> Tt. next(); 

lobeket=hble elo >.40l=] oh ese) on -Lea oie) oP 


还 可 以 像 图 7.10 这 样 对 Iterator 对 象 使 用 for in 语句 。 
7.10 对 lterator 对 象 使 用 for in 语句 











WarTTamrE Te LeCEon Onety A 


it = new Iterator(arr, true); 
二 CE 全 ES 


js> var it = new Iteratorl(arr, false); 
Js Eor (ver pa Tnete ornel(a 
(A= lo) 

1,one 

2 EwS 


对 于 已 经 存在 的 对 象 或 数组 来 说 ， 使 用 Iterator 其 实 并 没有 太 大 的 作用 。 这 是 因为 for in 语句 以 及 for 

















each in 语句 已 经 提供 了 足够 的 抽象 化 的 循环 功能 。 


返 


简 


可 























那么 ， 什 么 时 候 Iterator 能 发 挥 其 作用 呢 ? 答案 是 在 使 用 自 定 义 迭 代 咒 时 。 代 码 清 单 7.3 是 一 个 能 够 
回 阶乘 的 自 定义 迭代 器 的 例子 。 

在 代码 清单 7.3 中 有 很 多 古怪 的 代码 ， 风 格 与 JavaScript 不 太 相像 ， 明 显 是 使 用 了 复杂 的 代码 来 实现 
单 的 功能 。 如 果 使 用 生成 器 〈 下 一 节 会 介绍 )， 就 能 够 用 更 为 简洁 的 代码 来 实现 同样 的 功能 。 在 此 先 尽 
能 地 理解 其 含义 即 可 。 


























| 代码 清单 7.3 ”能 够 返回 阶乘 结果 的 自 定义 迭代 器 


// 和 迭代 器 的 目标 对 象 

function Factorial (max) { 
this.max = max; 

} 


// 自 定义 迭代 器 

function FactorialIterator (factorial) { 
this.max = factorial.max; 
tania oo = Chie eurrenct = 
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} 
// 返 代 器 的 实现 


FactorialIlterator.prototype.next 
= function() { 
(nom Enna 
throw StopIteration; 
} else { 
return this.current *= this.count++; 
} 


本 
// 将 Factorial 与 FactorialIterator 相关 联 
// _iterator 属性 是 一 种 特殊 的 属性 


Factorial.prototype. iterator = function() { return new FactorialIterator (this); } 








// 对 代码 清单 7.3 的 调用 
js> var obj = new Factorial (5) ; 
JES Tor (EE 





团 7.1.13 生成 器 | 


和 和 迭代 器 一 样 ， 生 成 器 (Generator ) 也 是 JavaScript 自 定 义 的 增强 功能 ， 其 作用 是 帮助 执行 循环 处 
理 。 从 表面 上 来 看 ， 生 成 器 就 像 一 个 普通 的 函数 。 生 成 器 与 通常 的 函数 的 不 同 之 处 在 于 是 否 在 内 存 进行 
了 yield 调用 。 一 个 函数 如 果 在 内 部 进行 了 yield 调用 ， 它 就 是 一 个 隐 式 的 生成 器 。 此 外 需要 注意 的 是 ， 
在 JavaScript 中 ，yield 是 一 个 保留 字 。 

下 面 我 将 通过 与 普通 函数 的 比较 来 对 具体 说 明 一 下 生成 颖 。 在 代码 清单 7.4 中 ， 代 码 的 输出 结果 是 
由 1 至 通过 参数 传人 的 最 大 值 的 所 有 数 的 阶乘 。for 循环 内 的 print 函数 用 于 输出 阶乘 的 计算 结 


| 代码 清单 7.4 输出 ( print ) 阶乘 的 函数 


function factorial printer (max) { 
Var CUE Ss 1 
for (var n = 1; 1 <s MaxX; n++) { 
GI = 
BPELTnE (eu ou 















































// 对 代码 清单 7.4 的 调用 
> Foctortiallor ter(s) 
pe 


eur 
cur 
SE 
Su 





在 代码 清单 7.4 中 的 函数 factorial printer 内 的 print 之 前 调用 yield 函数 的 话 ， 就 变 成 了 代码 清单 7.5 
中 的 factorial_generator 函数 。 生 成 器 与 它 的 区 别 仅仅 在 于 是 否 使 用 了 yield， 其 他 方面 看 起 来 和 普通 的 函 
数 一 样 。 不 过 如 果 像 普通 的 函数 那样 来 调用 factorial_ generator， 不 会 有 任何 输出 。 先 不 论 这 时 究 竞 进行 
了 什么 操作 ， 至 少 print 确实 是 没有 被 执行 。 

调用 函数 factorial_generator 之 后 将 会 返回 一 个 对 象 。 这 个 对 象 称 为 迭代 生成 器 。 调 用 和 迭代 生成 器 的 
next 方法 的 话 ， 就 可 以 执行 1 次 生成 器 中 的 循环 。 
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| 代码 清单 7.5 ”生成 器 的 例子 


function factorial generator (max) { 


Var eur = 1 
Eor (var ne LT? Hm <a ma tt 


Gs 7 
yield (cur); 
eee 


// 对 代码 清单 7.5 的 调用 | 
// 在 调用 之 后 不 会 有 任何 可 见 反 应 ( 仅仅 返回 了 一 个 迭代 生成 器 ) 
saceorialeen ret orl 


QO 


{ 


// 在 调用 了 和 迭代 生成 器 的 next 方法 后 ， 将 会 执行 1 次 factorial generator 中 的 循环 


so ver gq “tactortuloenerat ons 


SS penmel(o mexte 
1 
SS ne ee 
CE 二 三 林业 
2 

print (g.next () ) ; 
Cur = 2 
6 

printlo. next ty 
CULT = 24 
120 
Ss penmtel(o nexel 
eur = 120 


uncaught exception: [object StopIteration] 








以 像 下 面 这 样 输出 所 有 的 阶乘 结果 。 
// 通过 for in 语句 对 迭代 生成 器 进行 调用 








由 于 从 内 部 来 看 迭代 生成 器 是 一 个 迭代 器 ， 所 以 可 以 将 next 方法 调用 隐藏 至 for in 循环 的 内 部 。 可 


svar og factortaldgeneratorl(s) 
TS Eor (ver mn i oo rine 


王 


2 
- 
- 
- 


我 们 可 以 将 生成 器 直观 地 理解 为 一 种 日 








昌 于 yield 而 处 于 停止 状态 的 函数 。 可 以 在 其 外 部 通过 next 方 





法 使 循环 过 程 继续 进行 。 在 生成 器 中 ， 常 常会 使 用 像 代 码 清单 7.5 中 那样 的 循环 语句 ， 不 过 事实 上 生成 











器 中 并 不 一 定 非 要 包含 循环 处 理 。 

















由 代码 清单 7.5 可 知 ， 在 调用 next 函数 时 ， 生 成 器 中 的 循环 将 会 执行 一 次 。 更 准确 地 说 ， 这 一 执行 

















过 程 与 循环 没有 关系 ， 只 是 执行 生成 器 中 的 代码 直 至 下 一 次 调用 yield 处 。 在 代码 清单 7.5 中 ，print 被 
写 在 了 yield 之 后 ， 但 即使 将 print 写 在 yield 之 前 ， 第 一 次 g.next0 的 调用 结果 也 将 是 输出 1。 也 就 是 说 ， 
在 调用 生成 器 时 不 会 执行 生成 器 内 部 的 任何 内 容 。 只 有 在 调用 了 next 方法 之 后 才 会 执行 生成 器 内 的 代 





人 码 ， 直 至 yield 处 停止 。 
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压 7.1.14 数组 的 内 包 lL 


数组 的 内 包 是 一 种 在 通过 生成 器 生成 数组 时 的 功能 。 这 也 是 JavaScript 自 定义 的 增强 功能 。 

可 以 使 用 代码 清单 7.5 中 的 factorial generator， 生 成 下 面 这 样 一 个 数组 。 不 过 需要 删 去 factorial 
generator 内 的 print(cur); 这 一 行 。 

// 使 用 代码 清单 7.5 中 的 factorial generator 


ep var factoriallarre mor each (Ton tactoriallogenerator (lo 





J prunt(tactorralare); 
lj.2:6r24,120,720,5040.40320,362880,3628800 


还 可 以 像 下面 这 样 通过 运算 或 这 语句 来 实现 第 选 功能 。 


J var factorialarr = [iri for eacn (i im factoriallogenerator (Lo)) 
Ss> onel(tace ona 
[e725 2 721 S504 440532362881 0 2628800 





ver factornraldarr for eaehn (Hr toactortialdogenerator( lio ea > 00D 
Js> orm tacE orn) 
O7200 S040 40320%362880 3628800l 





| 7.2 | JSON 


JSON 是 JavaScript Object Notation 的 缩写 ， 是 一 种 基于 JavaScript 的 字面 量 表 达 方 式 的 数据 格式 类 
型 。 其 标准 为 RFC4627。 在 ECMAScript 第 5 版 的 标准 中 也 包含 了 JSON 这 一 类 型 。 

JSON 能 够 通过 4 种 基本 数据 类 型 以 及 2 种 结构 化 数据 类 型 来 表示 。 

4 种 基本 数据 类 型 是 指 字符 串 值 型 、 数 值 型 、 布 尔 型 以 及 null 型 。 结 构 化 数据 类 型 是 指 对 象 与 数组 
只 要 将 这 里 的 对 象 理解 为 JavaScript 中 的 对 象 即 可 。 也 就 是 说 ， 这 是 一 种 元 素 为 名 称 与 值 的 配对 的 集 
合 。 而 数组 则 是 以 某 种 特定 顺序 排列 的 元 素 的 集合 。 

表 7.5 总 结 了 JSON 的 标准 。 实 际 上 这 是 JavaScript 中 字面 量 表达 方式 的 一 个 子 集 。 关 于 其 中 的 一 些 
不 同 之 处 ,请 参见 表 7.5 中 的 注意 点 一 栏 。 
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表 7.5 JSON 的 标准 






























































































































































数据 类 型 书写 示例 

字符 串 值 "foobar' 不 能 使 用 单 引 号 。 字 符 串 的 默认 编码 为 UTF-8 

数值 123.4 只 支持 10 进 制 书写 方式 

布尔 值 true 或 是 false 

null 值 null 

对 象 {Xx":1, 'Vv":"foo"} 属性 名 只 能 使 用 字符 串 的 方式 表示 而 不 能 使 用 {x:1} 这 样 的 字面 量 形式 

数组 {1, 2, foo" } 数组 中 的 元 素 可 以 被 指定 为 任意 类 型 的 值 

国 7.2.1 JSON 字符 串 | 





在 实际 的 程序 开发 过 程 中 ， 很 多 操作 都 包含 了 JSON 格式 数据 类 型 的 字符 串 (以 下 简称 JSON 字符 
串 ) 与 JavaScript 对 象 间 的 相互 转换 。 例 如 ， 在 将 JSON 数据 发 送 至 外 部 时 ， 需 要 将 内 部 的 对 象 转换 为 
JSON 字符 串 之 后 再 传输 。 而 在 接收 JSON 数据 的 场合 ， 先 将 JSON 字符 串 转 换 为 JavaScript 对 象 之 后 ， 
才能 不 借助 专门 的 API 对 其 值 进行 读 取 操作 。 
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转 JSON 字符 串 的 分 析 

在 本 节 中 所 介绍 的 原生 JSON 出 现 之 前 ， 可 以 通过 一 种 名 为 eval 函数 的 方式 将 JSON 字符 串 转 换 为 
JavaScript 对 象 。 传 递 给 eval 函数 的 字符 串 将 被 看 作 是 JavaScript 代码 并 被 执行 ( 以 进行 求 值 )，、 因 此 ， 
如 果 将 属于 JavaScript 对 象 的 字面 量 形 式 的 一 个 子 集 的 JSON 字符 串 传 递 给 该 函数 ， 就 会 返回 一 个 对 象 。 
不 过 这 种 方式 存在 一 些 问题 。 

由 于 被 传递 的 字符 串 会 被 作为 代码 进行 求 值 ， 所 以 其 中 的 语句 或 函数 调用 也 会 一 起 执行 。 这 在 接收 
不 被 信任 的 外 部 JSON 数据 时 是 非常 危险 的 。 此 外 ，eval 函数 本 身 也 有 一 些小 问题 。 例 如 ，eval( {x":1}") 
这 样 的 代码 将 会 引发 错误 。 
因为 eval 函数 会 将 参数 解释 为 JavaScript 语句 ， 所 以 {"'x":1} 不 会 被 看 作 是 对 象 字面 量 而 会 被 解释 为 
一 条 在 代码 块 中 有 一 个 标签 x 的 语句 。 为 了 让 这 条 语句 能 够 被 解释 为 对 象 字 面 量 ， 必 须 像 eval(({"x":1})") 
一 样 再 使 用 一 组 圆 括号 。 

为 了 解决 这 类 问题 ， 有 必要 将 字符 串 解释 为 JSON 字符 串 而 不 是 JavaScript 语句 。 在 这 样 的 背景 下 ， 
用 于 分 析 JSON 字符 串 的 库 出 现 了 。 其 中 有 代表 性 的 一 种 实现 是 json2.js"。 

随 着 JSON 的 广泛 应 用 ，JSON 分 析 融 不 再 以 外 部 库 的 形式 存在 ， 而 是 在 JavaScript 的 实现 中 提供 了 
用 于 分 析 JSON 字符 串 的 API。 在 ECMAScript 第 $ 版 中 ， 在 现 有 实现 方式 的 基础 上 ， 原 生 JSON 进一步 
被 定义 为 一 种 API。 如 果 使 用 了 原生 JSON 的 API， 不 必 再 依靠 eval 函数 这 样 的 对 代码 进行 求 值 的 方式 ， 
就 能 对 纯 JSON 字符 串 进 行 分 析 。 


国 7.2.2 JSON 对 旬 | 


JSON 对 象 是 一 种 用 于 原生 JSON 分 析 的 对 象 ， 无 法 对 其 进行 构造 函数 调用 。 如 果 用 Java 中 的 术语 
来 说 ， 它 相当 于 能 够 直接 使 用 类 方法 的 工具 类 。 
表 7.6 总 结 了 JSON 对 象 的 属性 。 图 7.11 是 一 个 JSON 对 象 的 使 用 示例 。 
表 7.6 JSON 对 象 的 属性 













































































































































































属性 名 说 明 
i 对 参数 text 这 一 JSON 字符 串 进行 分 析 之 后 返回 一 个 JavaScript 对 象 。reviver 
ee 将 会 对 每 个 属性 调用 回调 函数 ， 并 将 返回 信 赋 为 属性 信 
将 参数 value 转换 为 JSON 字符 串 。replacer 将 会 对 每 个 属性 调用 回调 函数 ,并 










































































stringify(valuel, replacer[, space]]) 











将 返回 值 赋 为 属性 值 。space 则 是 输出 时 的 一 个 缩 进 字符 串 











7.11 JSON 对 象 的 使 用 示例 


// 将 JSON 字符 串 转 换 为 对 象 

Se Wp // JSON 字符 捉 
dl lo DazSeSy 7 

eS orem (oe 

1 


// 将 对 象 转换 为 JSON 字符 串 
SS JSON stelndify (ee I vo val ntoobar 三 


y(n TN a AnfocbareN 


// 将 JSsoN 字符 串 的 数组 转换 为 对 象 的 数组 

可 Sa 和 二 可 SONSPaESGII SEE 下 
可 SEEImEWac 

ee 

js> Array.isArray (arr); 

true 


// 将 字符 串 型 的 JSON 字符 串 转 换 为 字符 串 值 








四 http://www.JSON.org/json2.js 
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JSEEVXaTEEEEEOWSONOSESETD GE 


js> typeof s; 
bs sh ma hy 


// 将 数值 型 的 JSON 字符 串 转 换 为 数值 
js> var n = JSON.parse (3); 
js> typeof n; 

"numbezn" 





如 果 对 一 个 格式 错误 的 JSON 字符 串 进 行 分 析 ， 则 会 发 生 下 面 这 样 的 错误 。 所 以 在 使 用 单 引 号 的 字 


符 串 以 及 对 象 属性 名 时 应 加 以 注意 。 
SGQNRRaESSIEcD 


四 
ieN 卫 saEI= 








于 // 使 用 单 引 号 的 字符 串 是 一 种 错误 的 形式 


六 


js> Var s 
SyntaxError: 


// 当 属 性 名 不 是 字符 串 时 会 发 生 错误 


Js> Var arr USON PaESE 人 人 人) 
SyntaxError: JSON.parse 


7.3 日 期 处 理 


Date 类 是 一 种 用 于 日 期 处 理 的 类 。 下 面 是 一 个 简单 的 使 用 示例 。 
// 如 果 使 用 不 含 参数 的 构造 函数 调用 ， 则 会 生成 一 个 包含 了 当前 时 刻 的 Date 实例 





js> var dt = new Date(); 


SE Mohs sehe 
Sat May O720TT03:1S52T GMIrONONO 


从 内 部 来 看 ， 这 一 时 刻 是 从 基准 时 起 经 过 的 毫秒 数 的 整数 形式 。 这 里 的 基准 时 是 指 GMT 标准 的 


(ST) 








1970 年 1 月 1 日 0 时 0 分 。 由 于 这 一 基准 时 也 称 为 epoch， 所 以 从 基准 时 起 所 经 过 的 时 间 ， 有 时 也 被 称 
为 epoch 毫秒 或 epoch 值 。 在 JavaScript 中 ， 正 负 整 数 是 用 53 位 比特 来 表示 的 ， 所 以 能 够 支持 基准 时 之 
前 以 及 之 后 的 足够 长 的 时 间 〈285616 年 )。 其 中 在 基准 时 之 前 的 时 间 通 过 负 的 epoch 毫秒 来 表示 。 

下 面 进一步 说 明日 期 处 理 的 细节 。 日 期 可 以 在 4 种 形式 之 间 任 意 相 互 转换 ， 如 表 7.7 所 示 。 


表 7.7 日 期 数据 的 表示 形式 




















































































































































































































名 称 主要 用 途 
epoch 什 保存 于 数据 库 中 的 值 。 各 种 转换 的 根 底 。 用 于 计算 经 过 的 时 间 
Date 类 JavaScript 代码 的 内 部 形式 。 用 于 月 份 的 处 理 、 星 期 的 处 理 ， 或 星期 几 的 判断 
字符 串 名 用 户 显 示 日 期 ( 包括 农历 等 )， 或 作为 用 户 输入 值 的 形式 ， 以 及 网 络 传输 时 的 形式 
年 月 日 等 数值 户 显示 日 期 ， 或 作为 用 户 输 入 值 的 形式 
epoch 值 是 一 种 纯 数 值 。 从 某 种 意义 上 来 说 比较 容易 处 理 ， 但 数值 本 身 的 适用 范围 也 会 有 所 限制 。 能 





够 称 得 上 具有 实际 意义 的 运算 ， 大 概 也 就 只 有 通过 减法 来 求 经 过 的 时 间 而 已 了 。 如 果 为 了 求 1 个 月 之 后 
的 值 ， 一 般 不 会 通过 对 epoch 值 进 行 加 法 计算 来 实现 。 其 中 的 理由 很 容易 理解 。 到 底 是 应 该 加 上 30 天 所 
经 过 的 毫秒 数 还 是 应 该 加 上 31 天 所 经 过 的 毫秒 数 ， 又 或 者 这 一 年 是 否 是 国 年 ，2 月 份 到 底 有 多 少 天 ,， 诸 
如 此 类 的 问题 都 通过 epoch 值 来 计算 的 话 ， 是 不 切实 际 的 。 

Data 类 的 作用 就 是 将 这 些 日 期 处 理 中 的 复杂 情况 隐藏 起 来 ， 而 且 epoch 值 与 Date 对 象 之 间 的 相互 转 
换 也 很 容易 。 

字符 串 与 数值 的 表示 方法 其 实 是 用 于 输入 输出 的 形式 。 在 实际 开发 中 ， 应 尽 可 能 在 输入 或 输出 操作 
附近 将 其 转换 为 Date 类 或 epoch 值 。 这 是 因为 字符 串 以 及 数值 形式 是 与 地 区 和 时 区 设置 相关 的 ， 所 以 说 
少 使 用 这 两 种 形式 为 好 。 

epoch 值 是 一 个 与 地 区 和 时 区 都 无 关 的 数值 。 又 因为 Date 对 象 是 与 epoch 值 一 一 对 应 的 ， 所 以 同样 
























































也 是 与 地 区 和 时 区 无 关 的 。 正 因 如 此 ， 将 Date 对 象 转换 为 字符 
会 对 结果 产生 影响 。 这 一 过 程 中 包含 了 很 多 日 期 处 理 中 的 难点 ， 








或 数值 时 ， 系 统 当前 所 处 的 地 区 和 时 区 
比如 如 何 判断 某 一 天 是 星期 几 ( 这 与 时 
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下 如 何 表 示 日 期 ( 到底 是 2011/11 还 是 2011 年 1 月 1 日 之 类 的 问题 与 地 区 相关 )， 如 何 判 断 是 否 
节假日 (这 取决 于 各 个 不 同 的 地 区 ) 等 。 
在 实际 的 客户 端 侧 JavaScript 中 ， 通 常 不 会 进行 复杂 的 日 期 处 理 。 如 果 在 客户 端 侧 处 理 这 类 问题 ， 则 
意味 着 结果 是 基于 客户 端 侧 的 地 区 和 时 区 得 到 的 。 虽 然 这 种 做 法 也 有 其 合理 之 处 ， 但 通常 还 是 交 
据 混 乱 。 


加 Date 类 | 
表 7.8 总 结 了 Date 类 的 函数 以 及 构造 函数 调用 。 
表 7.8 Date 类 的 函数 以 及 构造 函数 调用 


























函数 或 是 构造 函数 
Date() 返回 当前 时 刻 的 字符 串 














new Date([year[, month[, datel, hours[, minutes[， 
seconds[L, ms]]]]]]]) 





返回 参数 所 指定 的 时 刻 的 Date 实例 





























new Date(value) 将 参数 作为 epoch 值 并 返回 相应 的 Date 实例 
new Datel) 返回 当前 时 刻 的 Date 实例 


























需要 注意 的 是 ， 和 其 他 一 些 程序 设计 语言 一 样 ， 在 JavaScript 中 ，month 也 是 由 0 开始 计数 的 。 也 就 
是 说 ,一 个 显示 为 2012 年 1 月 1 日 的 Date 对 象 应 该 以 下 面 这 样 的 方式 生成 。 











js> var dt = new Date(2012,0,1); 7 22 和 月 旭 目 


js> Brint (dE); 
Sun Jan 01 2012 00:00:00 GMT+0900 (JST) 























































































































表 7.9 总 结 了 Date 类 的 属性 。 可 以 通过 Date.now0 的 形式 使 用 这 些 属性 。 
表 7.9 Date 类 的 属性 
属性 名 说 明 
prototype 原型 链 
length 值 为 7 
now() 返回 当前 时 刻 的 epoch 毫秒 
parsel(string) 对 参数 中 的 字符 串 进 行 分 析 并 返回 相应 的 epoch 毫秒 
UTC(year, month[, date[, hours[ minutesl[, | 、 六 本 
返回 参数 所 指定 时 刻 的 epoch 毫秒 
seconds[L ms]]]]]) 














表 7.10 总 结 了 Date.prototype 对 象 的 属性 。 
表 7.10 Date.prototype 对 象 的 属性 










































































































































































































































































































































































属性 名 说 明 
constructor 指向 Date 类 对 象 的 一 个 引 
getDate!() 返回 日 期 的 数值 。 了 期 从 1 开始 计 。 基 于 时 间 

让 二 车 
getDay() ， 人 期 从 期 日 始 计 。 期 目 是 :0， 期 六 是 6。 基 
getFullYear() 返回 年 的 数值 。 本 地 时 间 
getHours() 返回 小 时 的 数值 。 小 时 从 0 开始 计 。 基 于 本 地 时 间 
getMilliseconds() 返回 毫秒 的 数值 。 毫 秒 数 从 0 开始 计 。 基 于 本 地 时 间 
getMinutes() 返回 分 的 数值 。 分 从 0 开始 计 。 基 于 本 地 时 间 
getMonth() 返回 月 份 的 数值 。 月 份 从 0 开始 计 。1 月 是 0，12 月 是 11。 基 于 本 地 时 间 
getSeconds() 返回 秒 的 数值 。 秒 从 0 开始 计 。 基 于 本 地 时 间 
getTime() 返回 一 个 数值 形式 的 时 间 。 即 取得 当前 的 epoch 毫秒 值 
getTimezoneOffset() 返回 时 区 的 偏差 量 。 单 位 是 分 钟 
getUTCDatel() 返回 日 期 的 数值 。 日 期 从 1 开始 计 。 基 于 UTC 时 间 

和 大 A 吾 于 
getUTCDayl) 1 人 个 星期 从 星期 日 开始 计 。 星 期 日 是 0， 星期 六 是 6。 基 
getUTCFullYear() 返回 年 的 数值 。 UTC 时 间 
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getUTCHours() 返回 小 时 的 数值 。 小 时 从 0 开始 计 。 基 于 UTC 时 间 

getUTCMinutes() 返回 分 的 数值 。 分 从 0 开始 计 。 基 于 UTC 时 间 

getUTCMonth() 返回 月 份 的 数值 。 月 份 从 0 开始 计 。1 月 是 0，12 月 是 11。 基 于 UTC 时 间 

getUTCSeconds() 返回 秒 的 数值 。 秒 从 0 开始 计 。 基 于 UTC 时 间 

getUTCMilliseconds() 返回 毫秒 的 数值 。 秒 从 0 开始 计 。 基 于 UTC 时 间 

setDate(date) 将 日 期 设 定 为 参数 指定 的 值 ( 1-31 )。 本 地 时 间 

setFullYear(yearl, month[, date]]) 往年 份 设 定 为 参数 指定 的 值 。 基 于 本 地 时 间 

setHours(hourl, minl, secl, ms]]]) 将 小 时 设 定 为 参数 指定 的 值 。 基 于 本 地 时 间 

setMilliseconds(ms) 将 年 毫秒 设 定 为 参数 指定 的 值 。 基 于 本 地 时 间 

setMinutes(minl, secl, ms]]) 将 分 钟 设 定 为 参数 指定 的 值 。 基 于 本 地 时 间 

setMonth(monthl, date]) 等 月 份 设 定 为 参数 指定 的 值 ( 0-11 )。 本 地 时 间 

setSeconds(sec[, ms]) 将 秒 设 定 为 参数 指定 的 值 。 基 于 本 地 时 间 

setTimeltime) 年 epoch 毫秒 设 定 为 参数 指定 的 值 。 基 于 本 地 时 间 

setUTCDate(date) 将 日 期 设 定 为 参数 指定 的 值 ( 1-31 )。 UTC 时 间 

setUTCFullYear(yearl, month[, date]]) 往年 份 设 定 为 参数 指定 的 值 。 基 于 UTC 时 间 

setUTCHours(hourl, min[, secl, ms]]]) 将 小 时 设 定 为 参数 指定 的 值 。 基 于 UTC 时 间 

setUTCMiliseconds(tms) 等 年 毫秒 设 定 为 参数 指定 的 值 。 基 于 UTC 时 间 

setUTCMinutes(min[, sec[, ms]]) 将 分 钟 设 定 为 参数 指定 的 值 。 基 于 UTC 时 间 

setUTCMonth(month[, date]) 每 月 份 设 定 为 参数 指定 的 值 ( 0-11 )。 基 于 UTC 时 间 

setUTCSeconds(secl, ms]) 将 秒 设 定 为 参数 指定 的 值 。 基 于 UTC 时 间 

oDateString!) 等 Date 实例 的 日 期 转换 为 字符 串 值 。 基 于 本 地 时 间 

OoJSON(key) 将 Date 实例 转换 为 JSON 格式 的 字符 串 值 

olSOString() 等 Date 实例 转换 为 ISO8601 格式 的 字符 串 值 

oLocaleDateString() 将 Date 实例 的 日 期 转换 为 与 地 区 相关 的 字符 串 值 。 基 于 本 地 时 间 
JavaScript 自 定 义 的 增强 功能 。 以 format 字符 串 所 指定 的 格式 将 日 期 转换 为 字符 

oLocaleFormat(format) 捉 。 基 于 本 地 时 间 

oLocaleString!() 等 Date 实例 转换 为 地 区 相关 的 字符 串 。 基 于 本 地 时 间 

oLocaleTimeString() 将 Date 实例 所 表示 的 时 刻 转换 为 地 区 相关 的 字符 串 。 地 区 相关 时 刻 

oSourcel) JavaScript 自 定义 的 增强 功能 。 返 区 成 Date 实例 的 字符 串 ( 即 源 代码 ) 

oString() 将 Date 实例 转换 为 字符 串 值 。 基 于 本 地 时 间 

oTimeString() 等 Date 实例 的 时 刻 转 换 为 字符 串 值 。 基 于 本 地 时 间 

oUTCString!() 将 Date 实例 转换 为 字符 串 值 。 基 于 UTC 时 间 

valueOf() 等 Date 实例 转换 为 数值 。 即 取得 当前 的 epoch 毫秒 值 





























表 7.11 总 结 了 Date 类 的 实例 属性 。 
表 7.11 Date 类 的 实例 属性 








[ 内 部 值 ] 日 期 值 














Date 类 JavaScript 代码 的 内 部 形式 。 月 份 的 处 理 、 星 期 的 处 理 以 及 对 星期 几 的 判断 


7.4 | 正则 表达 式 





























国 7.4.1 正则 表达 式 的 定义 | 


正则 表达 式 是 一 种 适用 于 字符 串 的 模式 匹配 的 语言 。 正 则 表达 式 的 英语 为 regular expression， 常 常 省 
略为 regex ( 其 发 音 为 [red3eks] )。 在 JavaScript 中 ， 我 们 可 以 通过 正则 表达 式 对 象 来 使 用 正则 表达 式 。 
正则 表达 式 也 是 一 种 语言 。 不 过 它 不 是 JavaScript 这 样 的 多 功能 程序 设计 语言 ， 而 是 一 种 专门 为 特定 
用 途 而 设计 的 语言 。 这 类 专 为 特定 用 途 设计 的 语言 有 时 称 为 DSL (Domain Specific Language， 领 域 专 用 
语言 )。 正 则 表达 式 是 程序 设计 历史 上 最 为 成 功 的 一 种 DSL， 其 应 用 领域 主要 集中 于 搜索 ( search ) 与 蔡 
换 (replace )。 
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字符 串 模 式 匹配 的 一 个 应 用 实例 ， 就 是 在 字符 串 中 寻找 某 个 特定 的 字符 串 ， 比 如 在 "you love 


JavaScript" 这 一 字符 串 中 找到 "JavaScript" 这 一 单词 。 























上 面 的 例子 比较 简单 ， 所 以 无 需 使 用 正则 表达 式 ， 直 接 用 字符 串 类 中 的 方法 会 更 加 方便 。 那 么 换 一 
种 情况 ， 如 果 要 在 "you love JavaScript" 这 一 字符 串 中 寻找 从 1 开始 至 e 结 束 的 单词 ， 应 该 怎样 实现 呢 ? 














可 以 想象 ， 代 码 就 会 因此 变 得 很 复杂 了 。 





下 面 以 此 为 例 ， 说 明 一 下 正则 表达 式 的 使 用 方法 。 首 先是 “从 1 开始 至 e 











结束 的 单词 ”的 描述 方法 。 


在 正则 表达 式 中 ， 这 可 以 用 \blw*e\b 这 样 一 个 乍 看 不 知 所 云 的 方式 来 表达 。\bl\w*e\b 这 一 根据 正则 表达 


























式 规则 写 出 的 字符 串 称 为 模式 ， 其 具体 的 含义 将 在 之 后 说 明 。 














正则 表达 式 引 擎 的 功能 是 ， 在 收 到 了 模式 之 后 从 目标 字符 串 中 寻找 该 模式 。 引 擎 的 内 部 功能 是 基于 








从 字符 串 头 部 开始 逐一 对 字符 串 进行 检索 比 对 的 方式 扩展 而 成 的 。 为 了 提高 执行 效率 ， 实 际 的 引 警 采取 
了 很 多 改进 手段 ， 不 过 ， 这 些 正 则 表达 式 引 警 的 内 部 原理 对 于 一 般 的 开发 者 来 说 是 无 需 了 解 的 。 事 实 上 ， 


























正则 表达 式 引擎 在 JavaScript 的 具体 实现 中 也 是 被 隐藏 起 来 的 。 
国 正则 表达 式 的 写法 

对 于 模式 匹配 问题 来 说 ， 如 果 要 通过 正则 表达 式 解决 ， 则 需要 设计 出 
在 之 后 将 目标 字符 串 与 模式 传递 给 正则 表达 式 引擎 以 供 查 找 。 



































用 于 描述 该 模式 的 语言 写法 ， 


从 字符 串 的 头 部 开始 查找 的 方法 ， 说 到 底 是 一 种 针对 问题 设计 出 算法 以 写 出 相应 的 子 程序 的 方式 。 
为 了 让 这 段子 程序 能 够 适应 多 种 情况 ， 不 得 不 向 它 提供 多 种 外 部 参数 。 这 些 参 数 可 能 是 多 个 旗 标 变量 ， 














也 可 能 是 供 某 些 方法 使 用 的 参数 ， 又 或 者 是 很 多 的 回调 函数 。 而 正则 表达 式 则 采 
































用 了 为 一 种 不 同 的 方式 





来 解决 问题 。 正 则 表达 式 的 基本 思想 是 ,不 使 用 那些 需要 用 到 很 多 参数 的 子 程序 ， 而 是 设计 出 一 种 可 以 








描述 问题 的 语言 。 引 擎 作为 这 种 语言 的 解释 器 ， 而 实际 解决 问题 的 子 程序 则 被 隐藏 在 了 引 敬 内部。 引擎 
的 设计 或 许 会 相当 复杂 ， 不 过 只 要 成 功 设计 出 来 ,解决 问题 的 所 有 难点 就 都 转移 到 了 语言 
种 思考 方式 也 是 一 种 很 高 级 的 程序 设计 技巧 ， 最 好 记 在 脑 中 ， 或许 什 么 时 候 就 能 发 挥 作用 。 














国 7.4.2 正则 表达 式 相 关 的 术语 
接 下 来 对 正则 表达 式 的 术语 进行 整理 。 
@ 模式 


@ 输入 字符 串 
@ 匹配 





的 了 





BB 写 上 。 这 


查找 规则 被 称 为 模式 ( pattern )。 用 于 查找 模式 的 对 象 字 符 串 被 称 为 输入 字符 串 。 在 前 一 节 的 例子 





中 ,“ 从 1 开始 至 e 结 束 的 单词 ”是 一 个 模式 ， 而 "you love JavaScript" 则 是 输入 字符 串 。 
在 输入 字符 串 中 寻找 与 模式 相 一 致 的 字符 串 的 过 程 称 为 匹配 (match )。 至 于 是 
位 置 ， 还 是 会 检测 所 有 的 匹配 ， 则 因 API 而 异 。 有 时 ， 也 会 将 查找 到 的 字符 唱 


置 称 为 匹配 。 


加 7.4.3 正则 表达 式 的 语法 











只 检测 到 第 一 个 匹配 











， 或 是 找到 该 字符 串 的 位 








正则 表达 式 也 是 一 种 语言 ， 因 此 有 其 自身 的 语法 。 不 过 ， 它 的 语法 与 JavaScript 语言 的 语法 的 概念 有 
些 不 同 。 事 实 上 ， 从 语言 的 角度 来 看 ， 将 正则 表达 式 看 作 一 种 专 为 模式 匹配 而 设计 的 表达 方式 或 许 理解 














起 来 会 更 加 容易 “。 





中 ”如果 要 详细 说 明正 则 表达 式 ， 丽 怕 需要 一 整 本 书 的 篇 幅 了 。 所 以 本 书 仅 介绍 其 中 的 一 部 分 内 容 。 
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国 模式 字符 串 的 组 成 元 素 


在 正则 表达 式 中 ， 模 式 字符 中 








的 组 成 元 素 可 以 分 为 元 字符 与 字面 量 字符 两 种 类 型 。 
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155 @ 


将 会 按照 写 在 模 


式 中 的 内 容 ， 原 封 不 动 地 解释 正则 表达 式 中 的 字面 量 字符 。 例 如 ， 在 正则 表达 式 中 "book" 这 一 字符 串 是 
一 个 模式 字符 串 ， 这 个 模式 可 以 与 以 下 输入 字符 串 相 匹配 。 





® "book" 
® "books" 


® "buy a book" 


® "notebook" 





请 多 加 注意 。 





























差别 。 如 果 要 充分 利 

















正则 表达 式 引 擎 并 不 会 将 "book" 理解 为 一 个 单词 ， 所 以 自 
对 于 仅 有 字面 量 字符 的 情况 ， 正 则 表达 式 或 许 看 起 来 与 String 类 的 indexOf 方法 没有 什么 
] 正 则 表达 式 ， 则 需要 对 元 字符 加 以 利用 。 





然 也 会 与 "notebook" 等 字符 上 








表 7.12 列举 了 一 些 在 ECMAScript 第 5 版 中 定义 的 正则 表达 式 元 字符 。 


表 7.12 JavaScript 正则 表达 式 的 元 字符 ( ECMAScript 第 5 版 ) 








匹配 ， 对 此 
























































































































































































































































: 任意 1 个 字符 

\s 空白 字符 

\S FE 空白 字符 

Ww 可 以 构成 单词 的 字符 ” 

WW 不 能 构成 单词 的 字符 

Wd 数字 

\D 非 数字 

\b 单词 的 边界 

\B 不 是 单词 的 边界 

行 首 

$ 行 末 

X? 字符 X 重复 出现 0 次 或 1 次 

X?? 字符 X 重复 出 现 0 次 或 1 次 ( 非 贪心 法 ) 
X* 字符 X 重复 出 现 0 次 或 更 多 次 

X*? 字符 X 重复 出 现 0 次 或 更 多 次 ( 非 贪心 法 ) 
X+ 字符 X 重复 出 现 1 次 或 更 多 次 

X+? 字符 X 重复 出 现 1 次 或 更 多 次 ( 非 贪心 法 ) 
X{n} 字符 X 重复 出 现 n 次 

X{ny? 字符 X 重复 出 现 n 次 ( 非 贪心 法 ) 

X{n,} 字符 X 重复 出 现 n 次 或 更 多 次 

X{n,}? 字符 X 重复 出 现 n 次 或 更 多 次 ( 非 贪心 法 ) 
X{n,m} 字符 X 重复 出 现 至 少 nh 次 至 多 m 次 
X{n,m}? 字符 X 重复 出 现 至 少 n 次 之 多 m 次 ( 非 贪心 法 ) 
XlY X 或 者 Y 

[XYZ] 1 个 是 X 或 者 Y 或 者 Z 的 字符 

[XY2] 1 个 除了 X、Y、Z 以 外 的 任意 字符 

(X) 分 组 ( 以 供 之 后 引用 ) 

\ 数 字 对 分 组 的 引用 3 

(?:X) 仅 分 组 < 

X(?=Y) 匹配 X 之 后 接着 Y 的 情况 

X(?IY) 匹配 X 之 后 不 接着 Y 的 情况 

中 包括 字母 、 数 字 、 下 划 线 以 及 汉字 ) ( 原 书 中 并 没有 提 到 汉字 ， 而 实际 上 汉字 也 是 被 包含 在 内 的 。 译 者 注 
@ 即 尽 可 能 寻找 出 现 次 数 较 少 的 情况 。 译 者 注 

加 这 里 的 数字 是 分 组 出 现 的 序号 ， 译 者 注 

@” 即 不 记录 分 组 序号 ， 也 不 捕获 该 匹配 。 译 者 注 
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如 果 不 希 望 让 元 字符 中 存在 的 字符 被 解释 为 元 字符 ， 则 需要 通过 反 斜 杠 字 符 对 其 进行 转 义 。 例 如 ， 
如 果 不 希 望 让 模式 对 点 字符 (. ) 进行 匹配 ， 则 要 将 其 写 为 \ 的 形式 。 

如 果 在 模式 中 要 匹配 反 斜 杠 字 符 ， 则 需要 将 其 写成 \。 还 有 一 些 转 义 字符 的 使 用 方式 与 JavaSeript 中 
的 转 义 字符 类 似 ( 表 7.13 )。 








表 7.13” JavaScript 正则 表达 式 中 的 转 义 字符 





特殊 字符 ( 转 义 字符 ) ”意义 






























































n 换行 ( LF ) 

Ne 制 表 

Vv 可 车 换行 ( CR ) 

Vf 换 页 

vy 垂直 制 表 

NcX 榨 制 字符 。 例 如 \cA 为 0x01，NcB 为 0x02 等 

YXXX Latin-1 的 编码 值 (X 是 0 到 9 的 数字 或 a 到 上 的 字母 ) 
NUXXXX Unicode 的 编码 值 (X 是 0 到 9 的 数字 或 a 到 f 的 字母 ) 




















表 7.14 总 结 了 正则 表达 式 中 可 用 的 旗 标 。 旗 标的 设 定 方法 将 在 下 一 节 中 说 明 。 
表 7.14 JavaScript 正则 表达 式 中 的 旗 标 






























































g 全 局 匹配 模式 。 之 后 将 会 详 述 

i 忽略 英文 字母 的 大 小 写 的 模式 

m 多 行 模式 。” 与 $ 将 会 对 多 行 的 行 首 与 行 未 进行 匹配 

转 7.4.4 ”JavaScript 中 的 正则 表达 式 | 











在 JavaScript 中 ， 我 们 可 以 通过 正则 表达 式 对 象 来 使 用 正则 表达 式 。 正 则 表达 式 对 象 是 RegExp 类 的 
对 象 实例 。 下 面 是 一 个 简单 的 使 用 示例 。 


// RegExp 的 使 用 示例 

js> var reg = new RegExp('^[0-9]');// 生成 一 个 正则 表达 式 模式 为 ^[0-9] 的 RegExp 实例 
ss eg test( foon)s 对 输入 字符 串 ' foo' 进行 匹配 

false 结果 为 假 

js> reg.test('123'); 对 输入 字符 串 '123 ' 进行 匹配 

EU 结果 为 真 


还 可 以 通过 字面 量 方式 生成 一 个 RegExp 实例 。 可 以 像 下 面 这 样 在 两 个 /( 斜 杠 字 符 ) 之 间 书 写 正则 
表达 式 的 模式 。 
// 正则 表达 式 字面 量 


js> var reg = /“^[0-9]/; // 与 new RegExp('^[0-9]') 等 价 
js> zeg.constzuctor; // 确认 
































function RegExp() { 


[native codel] 


} 
在 使 用 正则 表达 式 的 旗 标 时 ， 如 果 是 构造 函数 ， 将 其 传递 至 第 2 参数 ， 如 果 是 字面 量 ， 则 写 在 2 个 
斜 杠 字 符 之 后 。 下 面 是 个 具体 例子 。 


// 设置 全 局 匹配 的 旗 标 
var reg = /“^[0-9]/g; 
neweregEs el lo 2 


// 设置 多 个 旗 标 
VE 
new Regexol( Io 90 


虽然 对 于 正则 表达 式 对 象 的 生成 来 说 ，new 表达 式 与 字面 量 表达 式 在 实际 操作 上 没有 区 别 ， 但 字面 
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量 表达 式 在 书写 上 更 为 简洁 ， 因 而 推荐 使 用 。 不 过 ， 如 果 在 执行 时 需要 对 正则 表达 字符 串 进行 组 合 ， 则 
仍 需要 使 用 RegExp 的 构造 函数 调用 。 

通过 字符 串 书 写 的 正则 表达 式 时 ， 有 一 些 需要 注意 的 地 方 。 那 就 通过 JavaScript 的 字符 串 值 书写 反 斜 
杠 字 符 时 ， 必 须 对 其 进行 转 义 。 
// 表示 头 部 为 空白 字符 的 正则 表达 式 模式 


js> Var reg = /“\s+/; 


























// 如 果 通 过 字符 捉 来 传递 该 模式 ， 则 需要 对 反 斜 杠 字符 进行 转 义 


js> var reg = new RegExp(' \\s+'); 
表 7.15 总 结 了 RegExp 类 的 函数 以 及 构造 函数 调用 ， 表 7.16 总 结 了 其 属性 。 
表 7.15 RegExp 类 的 函数 以 及 构造 函数 调用 














函数 或 是 构造 函数 调用 
RegExp(pattern, flags) E 则 表达 式 模 式 为 pattern 的 RegExp 实例 
new RegExp(pattern, flags) 生成 一 个 正则 表达 式 模式 为 pattern 的 RegExp 实例 














haan 




















表 7.16 RegExp 类 的 属性 























属性 名 说 明 
prototype 于 原型 链 
length 值 为 2 

















表 7.17 总 结 了 RegExp.prototype 对 象 的 属性 。 具 体 的 例子 则 将 在 下 一 节 中 介绍 。 
表 7.17 RegExp.prototype 对 象 的 属性 






















































































































































































属性 名 说 明 

constructor 对 RegExp 类 对 象 的 引 

execlstring) 返回 对 输入 字符 串 string 进行 正则 表达 式 匹 配 的 结果 

test(string) 返回 对 输入 字符 串 string 进行 正则 表达 式 匹 配 的 结果 的 布尔 值 

toSource JavaScript 自 定义 的 增强 功能 。 其 求 值 结果 将 返回 用 于 生成 RegExp 实例 的 字符 串 ( 源 代码 ) 

toString() 将 正则 表达 式 转换 为 字符 串 形 式 。 该 字符 串 的 格式 为 在 / 与 /之 间 包 含 了 相应 的 正则 表达 式 
表 7.18 总 结 了 RegExp 类 的 实例 属性 。 











表 7.18 RegExp 类 的 实例 属性 









































属性 名 说 明 

[ 内 部 值 ] 正则 表达 式 模式 的 内 部 形式 

ignoreCase 正则 表达 式 的 旗 标 之 一 

global 正则 表达 式 的 旗 标 之 一 

lastlndex 标识 下 一 次 匹配 的 起 始 位 置 的 字符 串 下 标 
multiline 正则 表达 式 的 旗 标 之 一 

source 正则 表达 式 模 式 的 字符 串 




















国 7.4.5 正则 表达 式 程序 设计 


转 test 方法 与 exec 方法 
实际 中 会 用 到 的 正则 表达 式 对 象 的 方法 有 exec 与 test 两 种 。 我 们 首先 说 明 test 方法 。 
如 果 输 入 字符 串 与 模式 相 匹 配 ，test 方法 就 会 返回 真 ， 如 果 没 有 得 到 匹配 ， 则 会 返回 假 。 具 体 的 例子 
请 参见 前 一 节 开 头 的 代码 示例 。 
exec 方法 则 稍 有 些 复杂 。exec 方法 会 在 模式 与 输入 字符 串 相 匹配 时 返回 一 个 结果 对 象 ( 数组 )。 如 果 
没有 得 到 匹配 则 返回 null 值 。 因 此 ， 如 果 对 返回 值 是 否 为 null 进行 判定 ， 则 能 够 得 到 与 test 相同 的 结 
如 果 仅 仅 需 要 知道 是 否 得 到 匹配 ， 使 用 test 方法 效率 更 高 。 
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轩 exec 方法 的 返回 值 

exec 方法 的 返回 值 是 一 个 用 于 表示 匹配 结果 的 数组 。 要 理解 该 返回 值 的 含义 ， 则 需要 对 正则 表达 式 
中 的 分 组 有 一 定 的 了 解 。 所 谓 正则 表达 式 的 分 组 ， 指 的 是 能 够 在 正则 表达 式 中 引用 匹配 字符 串 中 的 子 字 
符 串 〈 也 称 为 前 向 引用 )。 能 够 被 引用 的 子 字符 串 称 为 一 个 分 组 。 可 以 将 模式 内 的 一 部 分 用 圆 括号 括 起 来 
进行 分 组 。 在 一 个 模式 中 ， 可 以 多 次 使 用 圆 括号 分 组 。 对 于 前 向 引用 来 说 ， 分 组 号 是 从 1 开始 计 的 下 标 。 
仅 通过 文字 说 明 可 能 有 些 难以 理解 ， 请 看 图 7.12 中 的 例子 。 

在 exec 方法 的 返回 值 中 ， 数 组 的 第 0 个 元 素 是 在 输入 字符 串 中 第 一 个 得 到 匹配 的 字符 串 ， 而 从 数组 
的 第 1 个 元 素 起 则 是 分 组 的 前 向 引用 的 子 字符 串 。 图 7.12 是 没有 全 局 旗 标 ( 请 参见 表 7.14 ) 的 情况 。 

对 于 正则 表达 式 /Nw+NsQw+)/ 的 匹配 来 说 ， 是 否 进行 分 组 结果 都 没有 区 别 。 如 果 去 除 用 于 分 组 的 圆 
括号 ， 则 变 为 了 Aw+\svw+/。 这 个 模式 能 够 匹配 的 字符 串 为 : 一 个 或 是 更 多 个 能 够 组 成 单词 的 字符 ， 接 
着 空白 字符 ， 再 接着 一 个 或 是 更 多 个 能 够 组 成 单词 的 字符 。 简 单 来 讲 ， 可 以 理解 成 单词 加 空格 加 单词 的 
形式 。 如 果 以 这 个 模式 对 输入 字符 串 'abc def ghi jkl 进行 匹配 ， 则 开头 的 两 个 单词 将 得 到 匹配 。 通 过 正 
则 表达 式 分 组 ， 就 可 以 前 向 引用 每 一 个 单词 。 也 就 是 说 ， 前 向 引用 的 第 一 个 分 组 是 'abc'， 第 二 个 分 组 则 
是 'def。 因 此 ，exec 方法 返回 值 的 数组 元 素 就 是 图 7.12 中 的 形式 。 


图 7.12 exec 方法 的 具体 示例 ( 不 含 全 局 旗 标 ) 




























































































SS Var text = Vabe def ghi kl 
js> var reg = /(\w+)\s(\w+)/; // (\w+) 用 于 指定 分 组 ( 共 


人 

// 数组 的 第 o 个 元 素 是 完整 的 匹配 字符 串 。 从 数组 的 第 1 个 元 素 起 是 分 组 引用 的 子 字符 囊 

使 用 了 全 局 旗 标 ， 会 在 多 次 调用 exec 方法 时 不 断 地 寻找 下 一 个 匹配 。 从 内 部 来 看 ，RegExp 对 象 的 
lastIndex 属性 的 值 将 会 更 新 以 供 下 一 次 查找 时 使 用 。 
图 7.13 是 一 个 具体 的 例子 。 如 果 没 有 找到 匹配 ，exec 方法 会 返回 null， 所 以 通常 的 做 法 是 在 一 个 循 
环 中 查找 。 


图 7.13 exec 方法 的 具体 示例 ( 有 全 局 旗 标 ) 


jes var text = abe def gh EL 
js> var reg = /(\w+)\s(\w+)/g; 




















js> reg.exec (text); // 第 1 次 查找 

[= Te [ek=3 二 : Eee "def"] 

// 数组 的 第 0 个 元 素 是 完整 的 匹配 字符 串 。 从 数组 的 第 1 个 元 素 起 是 分 组 引用 的 子 字符 串 
js> reg.exec (text); J ED 2 re 

["ghi jkl", "ghi", "jk1"] 

ee 4 // 在 没有 找到 时 会 返回 null 

null 





国 7.4.6 字符 串 对 象 与 正则 表达 式 对 象 | 
在 String 对 象 中 有 不 少 以 正则 表达 式 对 象 作为 参数 的 方法 。 表 7.19 是 表 3.4 的 一 部 分 。 
表 7.19 String 对 象 中 将 正则 表达 式 对 象 作 为 参数 的 方法 











match(regexp) 返回 正则 表达 式 regexp 的 匹配 结果 




















将 searchValue ( 正则 表达 式 或 是 字符 串 值 ) 替换 为 replaceValue ( 字符 串 或 是 
函数 ) 并 返回 相应 的 字符 串 





replace(searchValue, replaceValue) 



















































































search(regexp) 返回 正则 表达 式 regexp 的 匹配 位 置 的 下 标 
spl parator. lit 通过 参数 separator ( 字符 串 或 是 正则 表达 式 ) 对 字符 串 进行 分 割 ， 并 返回 一 个 
Ph 字符 串 值 数组 
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search 方法 比较 简单 ， 它 返回 的 是 字符 串 中 与 指定 的 正则 表达 式 模式 相 匹配 的 位 置 。 如 果 没 有 匹配 
的 话 则 返回 -1。 

在 字符 串 的 分 割 ( split) 中 ,将 把 指定 的 模式 作为 分 割 字符 ， 对 字符 串 进行 分 割 操作 。 其 结果 是 一 
个 字符 串 的 数组 。 例 如 ， 字 符 串 为 "abcdefghi" 而 分 割 字 符 的 模式 为 逗号 (,) 时 ,会 将 其 分 割 成 "abe"、 
"def' 、"ghi" 这 3 个 字符 串 。 还 可 以 通过 正则 表达 式 模式 来 指定 分 割 字 符 。 关 于 split 方法 的 具体 示例 ， 请 
参见 7.1.9 节 。 

在 search 与 split 方法 中 ， 正 则 表达 式 的 全 局 旗 标 不 起 作用 ( 会 被 忽略 )。 

而 replace 与 match 的 操作 则 根据 全 局 旗 标 的 不 同 而 有 所 变化 。 首 先 说 明 replace。replace 的 作用 是 将 字 
符 串 中 的 子 字符 串 蔡 换 为 别 的 字符 串 。replace 的 第 1 参数 可 以 通过 正则 表达 式 指定 。 与 正则 表达 式 相 匹配 的 
部 分 就 是 将 会 被 蔡 换 的 部 分 。 如 果 对 正则 表达 式 设 置 了 全 局 旗 标 ， 则 会 替换 所 有 与 模式 相 匹配 的 子 字符 串 
如 果 没 有 设置 全 局 旗 标 ， 则 仅 会 奉 换 第 一 个 匹配 的 子 字符 串 。 此 外 ， 如 果 在 第 1 个 参数 的 正则 表达 式 中 进 
行 了 分 组 ， 则 还 能 在 第 2 个 参数 的 字符 串 中 ， 通 过 符号 来 标识 分 组 的 前 向 引用 。 需 要 以 $1、$2 这 样 的 $ 加 
上 数字 方式 来 进行 前 向 引用 。 关 于 其 他 一 些 符 号 ， 请 参见 表 7.20。 图 7.14 是 一 个 replace 的 具体 示例 。 


表 7.20 replace 中 支持 的 前 向 引用 




















































































































前 向 引用 说 明 

$& 相 匹 配 的 字符 串 

$ 数 字 分 组 的 前 向 引用 。 数 字 从 1 开始 计 
下 位 于 匹配 之 前 的 字符 串 

$ 位 于 匹配 之 后 的 字符 串 


























| 7.14 replace 的 具体 示例 
js> var text = "abe def ghi 了 EL 5 


// 将 空格 蔡 换 为 过 号 字符 | 
> TAY // 没有 全 局 旗 标 
ee 


WE i 分 组 ， 并 将 其 移动 至 逗号 字符 之 后 
SEE neplacel/ (CON /or SI 瑟 
"ab, cde, fgh,ijkl" 





// 如 果 使 用 第 2 参数 ， 就 能 够 对 每 一 个 匹配 进行 回调 

// 回调 函数 的 第 1 个 参数 是 整个 匹配 ， 从 第 2 个 参数 起 是 分 组 的 前 向 引用 

// 回调 函数 的 返回 值 是 替换 字符 串 

// 在 下 面 的 例子 中 ， es 与 前 例 相同 

stexne replacel(l/( Ns/ Funcedonl(momm) { return ",'! 于 mL } ) 
apDAReOertoh ya 








match 方法 将 会 返回 元 素 为 与 模式 相 匹配 的 子 字 符 串 的 数组 。 根 据 全 局 旗 标 设置 与 否 ， 其 返回 值 的 
结果 会 发 生变 化 。 在 设置 了 全 局 旗 标 时 ， 将 会 返回 一 个 以 输入 字符 串 中 所 有 与 模式 相 匹配 的 子 字 符 串 为 
元 素 而 组 成 的 数组 。 如 果 没 有 设置 全 局 旗 标 ， 则 数组 的 第 0 个 元 素 是 第 一 个 获得 匹配 的 子 字 符 串 ， 从 数 
组 的 第 1 个 元 素 起 是 分 组 引用 的 子 字符 串 。 这 时 与 RegExp 的 exec 方法 的 返回 值 相同 。 

图 7.15 中 是 一 个 具体 的 例子 。 












































7.15 ” match 的 具体 示例 


js> var text EapecaeE ghi LT 


// 设置 了 全 局 旗 标 
ES ep nn/ 4 


bos ras Le ke "ern, He os lb We la te nl"] 
js> text.match!( A 

[= ole 有 ndef" ot ps oj 

js> text.match(/(\w+)\s (\w+)/9g); 





图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 

















@@ 160 一 一 一 第 2 部 分 ”JavaScript 的 语言 基础 


Dvabe de on ylL 


// 没有 设置 全 局 旗 标 





no] // 一 个 元 素 为 所 有 相 匹 配 的 子 字符 串 的 数组 


js> text.match(/(\w+)\s(\w+)/); 
["abc def", "abc", "def"] // 数组 的 第 0 个 元 素 是 整个 匹配 字符 串 


// 从 数组 的 第 1 个 元 素 起 是 分 组 引用 的 子 字符 串 





专栏 





ECMAScript 第 5 版 中 的 严格 模式 
严格 模式 是 在 ECMAScript 第 5 版 中 被 引入 的 概念 。 其 使 用 方式 是 在 代码 的 起 始 行 处 写 下 以 下 指令 。 如 























果 写 在 函数 的 起 始 行 ， 则 只 


"Ee Sloedeleup 
Me Sse Ny 























该 函数 会 使 用 严格 模式 。 


























可 以 看 到 ， 这 里 的 指令 只 是 普通 的 字符 串 而 已 。 所 以 在 不 支持 严格 模式 的 环境 下 ， 它 被 当 作 没有 意义 的 





语句 被 忽略 。 
在 严格 模式 中 , JavaScrip 

















村 


















































t 的 一 些 语言 功能 将 会 受到 限制 。 也 就 是 说 , 在 通常 情况 下 可 用 的 JavaScript 代 

















码 在 这 时 将 会 引起 错误 。 通 过 严格 模式 可 以 避免 JavaScript 中 的 很 多 容易 产生 错误 的 地 方 。 所 以 即使 并 不 会 












































在 实际 中 使 用 ， 学 习 一 下 严格 














模式 也 很 有 意义 ， 可 以 了 解 一 些 语言 陷阱 。 


























下 面 总 结 了 严格 模式 中 具 


代表 性 的 限制 。 











@ 禁用 隐 式 的 全 局 变量 








@ 在 函数 内 部 的 this 引用 不 会 指向 全 局 对 象 
@ NaN、Infinity、undefined 的 全 局 变量 是 只 读 的 


@ 禁用 同名 的 属性 名 
@ 禁用 同名 的 形 参 名 


@ 禁止 访问 arguments.callee 
@ 禁止 访问 Function 对 象 的 caller 属性 


@ 禁用 with 语 铝 


@ eval 不 会 生成 新 的 标记 
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客户 端 JavaScript 


本 部 分 将 阐述 在 浏览 器 中 运行 的 JavaScript， 以 
帮助 读者 深入 理解 其 特殊 之 处 。 
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客户 端 JavaScript 与 HTML 









本 章 讲 述 客户 端 JavaScript 的 开发 方法 、 运 行 方法 以 及 调试 方法 。 客 户 端 JavaScript 的 开发 、 
运行 与 调试 并 不 需要 专门 的 工具 ， 只 要 有 浏览 器 或 文本 编辑 器 就 能 立即 开发 了 。 


8.1 | 客户 端 JavaScript 的 重要 性 





闻 3.1.1 Web 应 用 程序 的 发 展 | 


随 着 互联 网 的 发 展 ， 现 在 的 网 页 已 经 能 够 支持 各 种 复杂 的 功能 了 。 这 里 所 说 的 网 页 已 经 不 仅仅 是 单 
纯 的 文档 ， 而 是 变 为 了 一 种 应 用 程序 ， 所 以 也 称 为 Web 应 用 程序 。 
图 Web 应 用 程序 的 功能 

Web 应 用 程序 会 在 两 个 地 方 执行 操作 以 实现 其 功能 ， 即 服务 器 端 与 客户 端 (浏览 器 )。 对 于 服务 器 端 
的 处 理 ， 可 以 使 用 Java、Perl、Python 、Ruby、SQL 等 多 种 类 型 的 语言 实现 。 与 之 相对 ， 用 于 描述 客户 
端 功 能 的 语言 可 以 说 只 有 JavaScript 一 种 。 

除了 JavaScript， 能 够 实现 客户 端 程序 功能 的 技术 还 有 Adobe Flash 和 Silverlight， 不 过 它们 只 能 在 特 
定 的 环境 中 运行 。 鉴 于 这 一 限制 ， 要 开发 、 发 布 能 够 广泛 运用 的 Web 应 用 程序 ， 最 好 选择 JavaScript。 

此 外 ，JavaScript 也 能 够 在 服务 器 端 运 行 ， 不 过 在 本 部 分 中 不 做 详细 介绍 。 在 这 一 部 分 中 提 到 的 
JavaScript 指 的 都 是 客户 端 JavaScript。 服 务 器 端 JavaScript 会 在 本 书 的 第 6 部 分 中 说 明 。 

现在 的 Web 应 用 程序 已 经 能 够 提供 各 种 各 样 的 功能 。 下 面 列举 其 中 一 些 基本 功能 。 

@ 拖 忠 操作 ( Drag and drop ) @ 异 步 读 取 @ 键 盘 快捷 键 ( 键盘 访问 ) @ 动 画 效 果 


这 些 功 能 基本 上 都 可 以 通过 JavaScript 实现 。Web 应 用 程序 所 能 实现 的 功能 正在 逐渐 增强 ， 今 后 将 
提供 不 逊 于 桌面 应 用 程序 的 体验 。 

与 此 同时 ， 在 以 Google Chrome 的 扩展 程序 及 Web 应 用 为 代表 的 非 Web 页 面 环 境 中 ，JavaScript 的 应 
用 也 越 来 越 普 及 。 因 此 ， 通 过 JavaScript 来 实现 的 功能 越 来 越 丰富 ， 用 JavaScript 开发 的 情况 也 越 来 越 多 。 


回 8.1.2 JavaScript 的 性 能 提升 | 


虽然 现在 JavaScript 在 Web 应 用 程序 的 开发 中 是 不 可 或 缺 的 一 部 分 ， 但 在 过 去 它 的 运行 速度 非常 缓 
慢 ， 无 法 以 令 人 满意 的 速度 实现 复杂 功能 。 不 过 随 着 浏览 器 中 所 使 用 的 JavaScript 处 理 引擎 的 性 能 不 断 提 
升 ， 现 在 的 JavaScript 已 经 能 够 确保 以 较 快 的 速度 来 运行 各 种 功能 了 。 

而 且 浏 览 器 的 开发 状况 也 变 得 越 来 越 活 跃 。Google Chrome 或 Firefox 都 是 每 6 个 星期 升级 一 次 ， 以 
此 为 发 布 周期 进行 开发 。 以 前 Internet Explorer 6 到 Internet Explorer 7 的 发 布 之 间 经 过 了 大 约 5 年 的 时 
间 ， 对 比 一 下 ， 我 们 就 能 够 了 解 现在 浏览 器 的 开发 到 底 有 多 活跃 了 。 
得 益 于 快速 的 发 布 周期 ，JavaScript 处 理 引 擎 的 功能 得 到 了 大 幅 增 强 ，JavaScript 的 性 能 得 以 提升 。 
同时 ，HTML5 与 CSS3 等 新 技术 的 实现 也 日 渐 完善 , 已 经 有 越 来 越 多 的 操作 只 通过 浏览 器 就 能 实现 。 关 
于 HTML5， 将 在 之 后 的 第 4 部 分 中 说 明 。 
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国 8.1.3 JavaScript 的 作用 | 


JavaScript 的 作用 之 一 是 提供 良好 的 用 户 体验 ， 使 应 用 程序 能 够 具有 更 加 易于 理解 的 界面 外 观 以 及 更 
高 的 易 用 性 。 为 了 实现 某 一 功能 ， 可 以 有 多 种 方法 。 用 户 所 需要 的 是 更 为 直观 的 操作 方式 。 进 一 步 说 ， 
他 们 追求 的 是 轻松 愉快 的 使 用 过 程 。 而 JavaScript 所 能 实现 的 正 是 这 些 。 

应 该 尽 可 能 考虑 如 何 利 用 JavaScript 实现 优秀 的 用 户 界面 ， 但 是 不 应 该 认为 仅仅 依靠 JavaScript 就 能 
实现 所 有 的 功能 。 理 由 有 以 下 两 点 。 

@ 很 多 浏览 器 都 禁用 JavaScript 

@ 有 些 浏览 器 允许 用 户 执 行 自 定义 的 JavaScript 


也 就 是 说 ， 在 有 些 情 况 下 ， 并 不 能 保证 JavaScript 能 够 按照 Web 应 用 程序 开发 者 的 预期 执行 。 所 以 ， 
应 该 理解 JavaScript 的 使 用 范围 与 局 限 性 ， 在 服务 器 和 客户 端 分 别 选择 合适 的 实现 方式 。 


8.2 HTML 与 JavaScript 


闻 3.2.1 网 页 显示 过 程 中 的 处 理 流程 | 


在 介绍 JavaScript 之 前 ， 我 们 首先 需要 了 解 一 下 浏览 器 显示 Web 页 面 时 的 流程 。 首 先 来 确认 一 下 浏 
览 器 在 显示 以 下 Web 页 面 时 执行 了 哪些 处 理 。 

在 下 面 的 例子 中 ，CSS 和 JavaScript 以 单独 文件 的 形式 存在 ， 另 有 一 个 单纯 用 于 显示 图 像 的 Web 页 
面 (代码 清单 8.1 )。 


| 代码 清单 8.1 基本 的 HTML 


<!DOCTYPE HIML> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Sample Page</title> 
<link rel="stylesheet" type="text/css" href="/css/sample.css"> 
< ee ml ee 
</head> 
<body> 
<img src="/image/sample.png"> 
</body> 
</html> 


浏览 器 在 访问 该 页 面 时 执行 了 以 下 处 理 。 
@ 分 析 HTML @ 构造 DOM 树 


@ 载 入 外 部 JavaScript 文件 以 及 CSS 文件 @ 载 入 图 像 文件 等 外 部 资源 
@ JavaScript 在 分 析 后 开始 执行 @ 全 部 完成 


这 里 的 要 点 在 于 图 像 文件 等 内 容 是 在 构造 完 DOM 树 之 后 才 下 载 的 ， 因 此 如 果 在 构造 完 DOM 树 后 再 
执行 JavaScript， 用 户 的 等 待 时 间 就 可 以 减少 。 具 体内 容 之 后 会 详 述 。 
国 as.2.2 JavaScript 的 表述 方式 及 其 执行 流程 | 


浏览 器 正确 读 取 Web 页 面 后 就 能 从 服务 器 取得 HTML 页 面 。 之 后 Web 浏览 器 将 分 析 该 HTML 文件 
并 显示 画面 。 
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为 了 执行 JavaScript， 需 要 在 HTML 文件 内 以 特定 的 方式 书写 JavaScript 的 代码 。JavaScript 的 书写 
方法 有 很 多 种 ， 其 执行 的 流程 也 各 不 相同 。 以 下 是 记述 方法 一 览 。 


@ <script> 标签 @ DOMContentLoaded 
@ 读 取 外 部 JavaScript 文件 @ 动态 载 入 
@ onload 





接 下 来 ， 我 们 开始 逐一 说 明 各 种 书写 方法 及 其 执行 流程 。 
图 <script> 标签 

在 <scripf> 标签 内 书写 JavaScript 是 一 种 最 为 简单 的 方法 。 

这 种 情况 下 ， 在 <script> 标签 被 分 析 之 后 就 会 立即 执行 JavaScript。 需要 注意 的 是 ， 这 样 将 无 法 操作 
<scripf> 标签 之 后 的 DOM 元 素 。 
由 于 JavaScript 是 在 分 析 <script> 标签 之 后 就 立即 开始 执行 的 ， 而 这 时 <script> 标签 之 后 的 DOM 元 
素 还 未 构造 ， 因 此 在 <script> 标签 内 就 无 法 取得 位 于 其 后 的 DOM 元 素 (代码 清单 8.2 )。 
| 代码 清单 8.2 无 法 操作 的 元 素 


<div id="a"></div> 






































<Serioes 
Var a = document .getElementById('a'); 
alert(a !== null); // => true 
var b = document .getElementById('b'); 
alert (b !== null); // => false 
</eeripes 


<div id="b"></div> 
为 了 避免 这 个 问题 ， 最 简单 的 方法 就 是 在 body 的 结束 标签 前 才 书 写 <scripe 标签 ( 代码 清单 83 ) 这 档 
来 ,在 读 取 <scripf> 标签 时 其 他 所 有 的 DOM 元 素 都 已 分 析 ， 从 而 能 够 操作 HTML 文件 中 所 有 的 DOM 元 素 。 
即使 如 此 ， 还 是 要 避免 对 body 操作 。 这 是 因为 这 时 的 <body> 标签 还 没有 结束 ， 如 果 对 其 操作 ， 后 
果 可 想 而 知 。 
如 果 和 希望 对 body 操作 ， 可 以 通过 下 面 的 onload 和 DOMContentLoaded 方式 来 执行 。 它 们 的 执行 流 
程 允许 对 body 操作 。 
有 代码 清单 8.3 “可 以 对 所 有 的 元 素 操作 的 方法 
<body> 


<div id="a"></div> 
<div id="b"S</div> 





5 





















































Esc 
Var a = Qocument .getElementBy I1d('a'); 
alert (a !== null); // => true 
Var b = document .getElementByIid('b'); 
alert(b !== null); // => false 
ET 
</body> 


国 读 取 外 部 JavaScript 文件 

虽然 直接 在 <script> 标签 内 书写 JavaScript 非常 简单 ， 但 在 实际 的 Web 应 用 程序 开发 中 ， 这 种 方式 
几乎 不 会 被 采用 。 大 多 数 情 况 下 ， 都 会 准备 单独 的 JavaScript 文件 ， 然 后 从 HTML 文件 中 读 取 这 些 文件 。 
这 时 的 书写 方式 如 代码 清单 8.4 所 示 。 

有 代码 清单 8.4 读 取 外 部 JavaScript 文 件 


<head> 
<script src="http://example.com/js/sample.js"></script> 
</head> 
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在 这 种 情况 下 将 会 读 取 文件 http://example.com/js/sampe.js 并 执行 。 该 文件 将 会 在 <script> 标签 分 析 
之 后 马上 读 取 。 一 旦 文件 读 取 完 成 ,文件 内 的 JavaScript 就 将 执行 。 

我 们 还 可 以 对 <scrip 人 > 标签 指定 defer 属性 和 async 属性 ( 代码 清单 8.5 )。 通 过 指定 defer 属性 ， 可 
以 使 该 <scripft> 标签 的 处 理 推迟 至 其 他 所 有 的 <script> 标签 之 后 。 而 如 果 指 定 了 async 属性 ， 则 会 以 异步 
方式 读 取 外 部 文件 ， 并 在 读 取 完 成 后 依次 执行 。 
| 代码 清单 8.5 ”defer 属性 与 async 属性 


<script src="http://example.com/js/samplel.js" defer></script> 
<script src="http://example.com/js/sample2.js" async></script> 


把 JavaScript 分 离 至 外 部 文件 具有 很 多 好 处 。 
首先 ， 浏 览 器 就 能 够 缓存 JavaScript 文件 了 。 如 果 JavaScript 文件 的 内 容 变化 并 不 频繁 ， 只 要 下 载 一 次 
JavaScript 文件 后 将 其 缓存 ， 在 第 二 次 读 取 时 就 能 够 避免 不 必要 的 下 载 ， 直 接 提 高 运行 速度 。 
其 次 ，HTML 与 CSS 和 JavaScript 文件 分 离 之 后 ， 团 队 分 工 将 变 得 更 加 容易 。 例 如 ，HTML 和 CSS 
主要 由 负责 界面 设计 的 人 员 来 书写 ， 而 JavaScript 则 由 负责 实现 功能 的 人 来 书写 。 
进一步 来 说 ， 一 般 的 编辑 器 对 于 某 一 特定 文件 只 能 采用 一 种 文法 高 亮 显示 模式 。 也 就 是 说 ， 如 果 
HTML 和 CSS 与 JavaScript 都 书写 在 同一 个 文件 中 ， 就 可 能 会 因为 没有 通用 的 文法 高 亮 模式 而 导致 无 法 
实现 文字 色彩 的 区 分 ， 从 而 导致 可 读 性 的 下 降 。 

为 了 避免 产生 这 种 情况 ， 最 好 将 代码 分 别 写 在 不 同 的 文件 里 。 
园 onload 

如 果 在 onload 事件 处 理 程序 (event handler ) 中 书写 JavaScript 代码 ， 则 能 够 在 页 面 读 取 完成 后 再 对 
其 执行 。 因 为 在 执行 时 已 经 完成 了 整个 页 面 的 读 取 ， 所 以 可 以 对 所 有 的 DOM 元 素 操作 。 关 于 事件 处 理 
的 具体 内 容 将 在 之 后 说 明 。 

如 果 要 直接 写 在 HTML 内 ， 可 以 像 代 码 清单 8.6 这 样 将 其 写 在 <body> 标签 里 。 如 果 要 写 在 外 部 的 
JavaScript 文件 内 ， 则 可 以 像 代 码 清单 8.7 这 样 书写 。 


| 代码 清单 8.6 ”onload 事件 处 理 程序 


<body onload="alert ('hello')"> 
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有 代码 清单 8.7 在 外 部 JavaScript 文件 中 使 用 onload 事件 处 理 程序 

window.onload = function () { alert('hello'); }; 

必须 注意 的 是 ， 如 果 使 用 了 onload 事件 处 理 程序 ， 则 会 在 读 取 了 所 有 写 在 HTML 文件 中 的 图 像 文 件 
之 后 才 对 其 执行 。 因 此 ， 如 果 在 页 面 内 存在 大 型 的 图 像 文件 ， 就 可 能 需要 花费 很 多 不 必要 的 时 间 等 待 图 
像 的 读 取 后 才 开始 执行 JavaScript。 

































































如 果 无 需 通过 JavaScript 对 图 像 处 理 ， 或 图 像 的 处 理 内 容 与 其 体积 无 关 ， 则 没有 必要 等 整个 图 像 读 取 
之 后 再 开始 处 理 。 在 载 人 图 像 的 同时 执行 JavaScript 处 理 的 话 就 能 够 缩短 用 户 的 等 待 时 间 。 


围 DOMContentLoaded 
对 于 使 用 上 述 的 onload 方 法 ， 执 行 JavaScript 时 可 能 需要 一 定 的 等 待 时 间 ， 这 可 以 使 用 

DOMContentLoaded 来 解决 。DOMContentLoaded 是 在 完成 HIML 解析 后 发 生 的 事件 。 将 事件 侦 听 器 设 

置 为 对 该 事件 侦 听 ， 就 能 够 减少 执行 JavaScript 之 前 的 不 必要 的 等 待 时 间 ( 代码 清单 8.8 )。 

| 代码 清单 8.8 ”对 DOMContentLoaded 事件 侦 听 



































document .addEventListener('DOMContentLoaded', function () { 
alert ('hello'); 
Yn false], 
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不 过 DOMContentLoaded 也 存在 一 些 问 题 ， 就 是 它 在 Internet Explorer 8 之 前 的 浏览 器 中 是 不 受 支 持 的 。 
不 过 ， 也 有 方法 能 够 在 早期 的 mternet Explorer 中 实现 相同 的 功能 。 

具体 来 说 ， 就 是 等 到 doScroll0) 方法 不 再 抛 出 异常 之 后 才 开始 执行 JavaScript 部 分 ( 代码 清单 8.9 )。 
这 里 利用 的 原理 是 ,在 DOM 树 的 构造 过 程 中 执行 doScroll0 方法 就 将 会 引发 错误 。 


| 代码 清单 8.9 在 IE 中 模拟 DOMContentLoaded 事件 


function IEContentLoaded(callback) { 
(Eunectelena 
try { 
document .documentElement .doScroll('left'); 
} catch (error) 
setTimeout (argument .callee, 0);，; 
return; 


























callback (); 
Ds 


IEContentLoaded (function () { 


alert ('hello'); 
站 


园 动态 载 入 

在 JavaScript 中 ， 我 们 可 以 在 生成 script 元 素 过 程 中 动态 地 载 入 JavaScript 文件 ( 代码 清单 8.10 )。 
| 代码 清单 8.10 ”JavaScript 的 动态 载 入 

var script = document .createElement ('script'); 


SCriDE sro other Tavaseript ou. 
document .getElementsByTagName ('head') [0] .appendChild (script); 


在 使 用 这 种 方法 执行 JavaScript 时 ，JavaScript 文件 在 下 载 过 程 中 并 不 会 阻 断 其 他 的 操作 。 这 是 一 个 
较 大 的 优点 。 ors dy 写 script 元 素 ， 则 在 下 载 该 JavaScript 文件 的 过 程 中 ， 其 他 图 像 文件 或 
CSS 文件 的 下 载 将 被 阻 断 。 不 过 ， 只 要 使 用 这 种 动态 的 载 人 方式 ， 就 能 够 避免 下 载 被 阻 断 而 继续 处 理 。 


面 8.2.3 执行 流程 的 小 结 | 


在 考虑 选用 何 种 JavaScript 执行 流程 时 ，DOMContentLoaded 是 最 为 恰当 的 选择 。 尽 管 在 Internet 
Explorer 中 实现 同样 的 功能 需要 花费 一 些 功 夫 ， 不 过 如 果 不 考虑 这 个 问题 ， 可 以 说 DOMContentLoaded 
是 最 佳 的 实现 方式 。 


8.3 运行 环境 与 开发 环境 


国 3.3.1 运行 环境 | 


要 说 起 人 们 最 熟悉 的 JavaScript 运行 环境 ， 答 案 自 然 是 浏览 器 。 有 以 下 这 些 著 名 的 浏览 器 : Internet 
Explorer 、Mozilla Firefox、Google Chrome 、Safari Opera。 


国 8.3.2 开发 环境 | 


编写 JavaScript 代码 时 ， 必 不 可 少 的 书写 工具 只 有 以 Emacs 或 Vim 等 为 代表 的 文本 编辑 器 。Eclipse 或 
NetBeans 等 多 用 途 IDE 也 具有 JavaScript 开发 所 需 的 相关 功能 ， 使 用 这 些 进 行 开发 也 是 不 错 的 选择 。 此 外 
还 有 WebStorm 这 样 的 JavaScriptHHTML 开发 专用 的 IDE， 不 过 它 是 一 款 收费 软件 。 
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| 8.4 | 调试 


在 编写 程序 的 过 程 中 ， 调 试 是 不 可 避免 的 一 个 环节 。 特 别 是 最 近 大 型 JavaScript 程序 的 开发 越 来 越 多 ， 
在 编写 程序 时 考虑 调试 难 易 度 的 问题 也 变 得 越 来 越 重要 。 在 此 我 们 将 说 明 一 下 JavaScript 的 调试 方法 。 


剖 8.4.1 alert | 


在 JavaScript 代码 中 加 上 alert 语句 是 一 种 简单 的 调试 方法 。 在 打开 浏览 器 时 将 会 显示 alert 对 话 
可 以 说 ， 这 是 所 谓 的 printf 调试 方式 的 JavaScript 版 本 。 

这 种 调试 方法 在 任何 浏览 器 中 都 可 以 实现 。 在 显示 alert 对 话 框 时 ， 所 有 的 JavaScript 处 理 都 会 中 止 。 
因此 ， 如 果 添 加 了 大 量 的 alerti 语句， 就 能 够 实现 单 步 执 行 。 不 过 这 时 需要 一 次 次 去 关闭 alert 对 话 框 ， 
不 方便 。 而且， 如 果 不 小 心 无 限 循 环 执行 了 alert 语句 ， 就 不 得 不 强制 结束 浏览 器 的 进程 以 关闭 窗口 。 
须 多 加 注意 。 

此 外 ， 还 可 以 像 代码 清单 8.11 这 样 ， 通 过 覆盖 对 象 的 toString() 方法 来 修改 alert 对 话 中 显示 的 字符 串 
‖ 代码 清单 8.11 修改 alert 所 显示 的 字符 串 


Var Foo = function (text) { 
this.text = text; 
Da 


Var Foo = new Fool('hello, alert.'); 
alert (foo); // => 将 显示 [object Object] 
ESERESSEETTTG tunetaonn on 

return this.text; 








iml 

















荆 














o 





alert (fo00); // => 将 显示 Hello, alert. 


圈 8.4.2 console | 


最 近 的 一 些 浏览 器 内 置 了 用 于 运行 JavaScript 的 控制 台 功 能 。 早 先 只 有 Firefox 的 Firebug 插件 才 提 
供 了 这 样 的 功能 。 由 于 使 用 Firebug 进行 开发 的 开发 者 数量 众多 ， 因 此 Safari 以 及 Google Chrome 等 浏览 
器 中 也 开始 内 置 这 一 功能 。 

在 JavaScript 代码 内 部 写 上 console.log(foo bar) 语句 之 后 ， 就 能 够 在 控制 台中 显示 foo bar 了 。 这 在 
本 质 上 与 使 用 alert 是 一 样 的 ， 不 过 因为 在 使 用 console 时 不 需要 一 次 次 去 关闭 对 话 框 ， 所 以 会 比 使 用 alert 
更 为 方便 。 同 时 ，console 中 也 能 够 显示 比 alert 方法 更 为 详细 的 信息 。 

但 是 在 Internet Explorer 等 一 些 没 有 内 置 console 对 象 的 浏览 器 中 ， 这 种 方法 自然 就 会 引起 错误 。 

国 虚拟 console 对 象 

按理 说 ， 在 实际 运行 应 用 程序 时 应 该 删 去 所 有 console 相关 的 代码 。 不 过 在 开发 过 程 中 常常 会 需要 对 程 
序 进行 一 些 测试 ， 如 果 为 此 每 次 都 删 去 console 部 分 的 代码 ,未 免 有 些 麻烦 。 于 是 ， 为 了 在 Internet Explorer 
这 类 不 支持 console 对 和 象 的 浏览 器 中 也 能 够 正常 运行 程序 ， 有 时 会 采用 区 入 虚拟 console 对 象 的 做 法 。 

可 以 像 代码 清单 8.12 这 样 ， 生 成 一 个 含有 Firebug 1.7.2 中 的 console 对 象 所 文 持 的 所 有 方法 的 虚拟 
console 对 象 。 只 要 在 首先 载 和 的 JavaScript 起 始 处 添加 该 对 象 ， 就 能 够 避免 在 调用 console 时 发 生 错 误 。 
在 实际 发 布 程序 时 ， 这 部 分 的 代码 应 该 和 console.log 等 内 容 一 起 删 去 。 当 然 ， 即 使 留 在 代码 中 也 没什么 。 
不 过 考虑 到 应 该 尽 可 能 减少 代码 量 以 提高 性 能 ， 还 是 应 该 将 它们 删 去 。 


| 代码 清单 8.12 ”虚拟 console 对 象 
if (!window.console) { 
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(EEC 

Var names = [ 
Lassere olean eouncu ee debuo oe ml 
rerrorm exoception' aroup", groupeollapsed'" SocupEno 
Votrecm ee ve nce ioe Monee ope 
"table", "time’', "timeEnd', "trace', Wan 

var consoleMock = {}; 

for (var i = 0, len = names.length; i < len; i++) { 
consoleMock [names [i]] = function () {}; 


} 
win.console = 
} (window) ) ; 


consoleMock; 
} 
图 显示 消息 及 对 象 


下 面 的 方法 具有 的 功能 基本 相同 ， 它 们 都 会 从 参数 中 取得 消息 
旨 定 的 参数 都 将 输出 。 


@ console.warn() 


制 台 。 这 些 方法 可 以 指定 多 个 参数 ， 且 每 一 个 


® console.log() 





® console.debug() 
® console.error() 





或 对 象 ， 然 后 将 取得 的 内 容 输 出 至 控 


® console.info() 


一 般 来 说 ， 仅 使 用 log0 方法 就 能 够 满足 需要 。 而 如 果 使 用 debug0 方法 ， 则 可 以 知道 输出 的 内 容 是 
































在 JavaScript 文件 中 的 哪 一 行 。 当 需要 使 
error()、warn()、info0 也 会 显示 行 数 。 











它们 与 debug0 的 





有 所 差异 ， 因 此 在 平时 的 使 用 中 不 必 太 在 意 这 些 
此 外 ， 如 果 对 第 1 个 参数 指 














果 想 要 提高 日 志 消 息 
| 代码 清单 8.13 ”格式 


consoles lo (vo Ss Sd 


的 易 读 性 ， 就 可 以 利用 这 一 方法 。 








universe, and everything', 42);，; 
// => The Answer to (the Ultimate Question of) life, the universe, 
国 分 析 对 和 象 并 显示 
console.dir() 方法 可 以 完整 输出 作为 参数 接收 到 的 对 象 ， 并 将 其 一 目 了 然 地 显 














dirxml0 方法 可 以 将 DOM 元 素 以 HTML 的 形式 显示 。 这 


大 量 console.log0 类 
区 别 仅仅 在 于 所 显示 的 图 标 与 文字 的 色彩 会 


'The Answer to (the Ultimate Question of) 

















型 方法 时 ， 选 用 





debug() 方法 会 很 方便 。 











定格 式 ， 则 会 对 从 第 2 个 参数 起 的 对 象 应 用 该 格式 (代码 清单 8.13 )。 如 


life, the 


and everything is 42. 








示 出 来 。console. 





种 方法 的 输出 内 容 都 比 console.log0 等 方法 更 











为 清楚 ， 但 也 会 让 日 志 的 篇 幅 变 得 很 长 ， 在 使 用 时 应 加 以 注意 ， 
图 显示 栈 追 踪 





不 要 因此 而 忽略 了 其 他 的 日 志 内 容 。 














使 用 console.trace() 方法 就 可 以 显示 该 函数 的 调 ) 
件 触发 了 该 函数 。 








在 事件 驱动 的 程序 设计 过 程 中 ， 要 清楚 地 知道 某 个 函数 在 什么 时 候 什 么 位 置 调 用 








i 





有 第 。 这 时 就 可 以 使 用 console.trace0 方法 来 理 清 各 种 调用 关系 ， 
图 测量 时 间 、 次 数 与 性 能 








] 者 ， 并 可 以 据 此 了 解 具体 是 哪 

















个 对 象 的 哪 一 个 事 











不 是 一 件 容易 的 








非常 方便 。 


我 们 可 以 通过 console.time() 方法 与 console.timeEnd(0) 方法 测量 这 两 个 方法 之 间 经 过 的 时 间 ( 代码 清 























单 8.14 )。 其 参数 分 别 为 每 次 计时 的 名 称 。 具 有 相同 名 称 的 方法 
间 的 显示 单位 为 毫秒 。 


| 代码 清单 8.14 console.time() 








console.time('foo'); 


alert ('foo 计时 开始 ') 
图 灵 社 区 会 员 














将 会 配对 ， 其 间 经 过 的 时 间 则 会 输出 。 时 
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console.time('baz'); 
alert ('baz 计时 开始 ') ; 
a 
alert ('baz 计时 结束 ' 
console. a Di 
alert ('foo 计时 结束 '); 


使 用 console.countO 就 可 以 知道 该 行 具 体 执行 了 多 少 次 ( 代码 清单 8.15 )。 


| 代码 清单 8.15 console.count() 



































EOr var 1 0 1 < 00 ef 
console.count ('foo'); 
dE 0 0 
console.count ('bar') 
} 


} 


wo TN 
Da 1 


此 外 ， 如 果 使 用 console.profile0) 或 console.profileEnd()， 则 可 以 获得 更 为 详细 的 测量 结果 。 它 们 可 以 
用 于 获取 各 个 函数 分 别 执 行 了 多 少 次 ,或 总 的 执行 时 间 等 信息 。 因 为 在 性 能 分 析 的 过 程 中 ， 这 一 分 析 也 
会 使 用 CPU 资源 ， 所 以 最 终 得 到 的 结果 将 会 比 正常 情况 更 差 。 不 过 另 一 方面 ， 在 性 能 优化 的 过 程 中 ， 哪 
些 函 数 被 多 次 调用 并 花费 了 大 量 的 执行 时 间 是 很 重要 的 信息 ， 所 以 这 一 功能 仍然 是 不 可 获 缺 的 。 
转 使 用 断言 

console.assert() 的 功能 是 仅 在 指定 条 件 为 false 时 输出 日 志 。 例 如 ， 为 了 确认 一 个 不 能 接收 null 的 参 
数 没 有 收 到 null 值 ， 就 可 以 像 下 面 这 样 使 用 该 方法 ( 代码 清单 8.16 )。 


| 代码 清单 8.16 console.assert() 

























































































function foo (notNul1obj) { 
console.assert (notNullObj != null, 'notNullObj is null or undefined'); 


// 其 他 代码 


foo // => 没有 显示 断言 。 调 用 正确 
foo(null); ”// => 显示 了 断言 。 调 用 错误 
foo(); // => 显示 了 断言 。 调 用 错误 


如 果 某 一 函数 在 参数 为 null 时 会 发 生 错 误 ， 则 可 以 通过 断言 来 检查 。 


转 8.4.3 onerror | 


在 JavaScript 中 ， 如 果 发 生 了 错误 ， 则 会 执行 Window 对 象 的 onerror 属性 所 指向 的 函数 。 这 个 函数 
接受 3 个 参数 。 第 1 个 参数 是 错误 消息 ， 第 2 个 参数 是 包含 了 发 生 错 误 的 JavaScript 文档 的 URL， 第 3 
个 参数 是 发 生 错 误 位 置 的 行 数 。 此 外 ， 如 果 该 函数 的 返回 值 为 true， 则 浏览 器 将 不 会 执行 输出 错误 日 志 
这 一 默认 行为 。 

在 开发 过 程 中 进行 测试 时 ， 可 以 通过 onerror 事件 句柄 输出 专门 的 日 志 并 将 其 发 送 给 服务 器 。 这 样 就 
获得 一 些 额 外 的 调试 信息 。 












































CC 


外 
加 8.4.4 Firebug, Web Inspector (Developer Tools), Opera Dragonfly | 


最 近 的 浏览 器 不 少 都 内 置 了 能 够 图 形 化 显示 DOM 内 容 或 与 服务 器 的 通信 内 容 等 信息 的 开发 工具 。 
Firefox 的 插件 Firebug 是 这 一 类 型 的 开发 工具 的 开创 者 。 之 后 出 现 的 开发 工具 大 都 实现 了 和 Firebug 等 同 
的 功能 。 下 面 是 一 些 经 常 使 用 的 功能 。 
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@ HTML/CSS 的 内 容 确 认 与 编辑 @ JavaScript 性 能 分 析 工 具 
@ JavaScript 控制 台 @ 网 络 监控 


@ JavaScript 调试 工具 


在 最 近 的 Web 开发 中 ， 客 户 端的 处 理工 作 增 加 了 很 多 。 上 面 这 些 功 能 也 变 得 越 来 越 不 可 或 缺 。 应 该 
积极 地 利用 这 些 功能 ， 尽 可 能 地 发 挥 它们 的 作用 。 
转 JavaScript 调试 工具 

通过 JavaScript 调试 工具 ， 可 以 轻松 地 在 代码 中 设置 断 点 以 从 断 点 处 开始 单 步 执行 ， 或 监视 某 一 变量 
的 状态 。 

如 果 在 源 代码 中 写 有 debugger， 则 可 以 在 运行 至 此 处 时 启动 调试 工具 (代码 清单 8.17 )。 这 就 如 同 预 
先 在 源 代码 中 设置 了 断 点 一 样 。 
有 代码 清单 8.17 从 源 代码 中 启动 JavaScript 的 调试 工具 

TEST ARTS 


7 任意 的 处 理 
debugger; we 运行 至 此 时 调试 工具 将 会 启动 






























































国 使 用 JavaScript 性 能 分 析 工 具 时 的 一 些 注意 点 
性 能 分 析 工 具 的 功能 是 测量 并 显示 某 一 函数 在 运行 时 需要 花费 的 时 间 。 这 对 于 优化 JavaScript 代码 并 
提高 运行 性 能 来 说 是 不 可 缺少 的 。 

在 使 用 性 能 分 析 工 具 时 ， 必 须要 注意 匿名 函数 ( anonymous function ) 的 情况 。 在 JavaScript 中 ， 郴 
数 作为 第 一 类 对 象 使 用 ， 所 以 不 必 对 函数 命名 也 能 执行 该 函数 。 像 代码 清单 8.18 这 样 注册 事件 侦 听 带 的 
方式 是 很 常见 的 。 
有 代码 清单 8.18 ”用 于 匿名 函数 的 事件 侦 听 器 

foo.addEventListener('click' function (event) { 

// foo 在 发 生 点 击 事件 时 将 会 进行 的 处 理 

}, false); 

这 里 所 写 的 

function (event) {} 

就 是 一 个 匿名 函数 。 

在 性 能 分 析 工 具 中 ， 匿 名 函数 将 显示 为 anonymous function。 如 果 只 用 了 一 个 匿名 函数 ， 并 不 会 与 其 
他 函数 产生 混淆 ， 自 然 也 就 没有 问题 。 但 是 在 使 用 了 多 个 事件 侦 听 器 时 ， 就 无 法 判断 具体 是 哪 一 个 函数 了 。 

为 了 避免 这 样 的 问题 ， 可 以 改 用 代码 清单 8.19 或 代码 清单 8.20 这 样 的 书写 方式 。 这 样 一 来 ， 匿 名 函 
数 就 不 再 是 anonymous function， 而 成 为 了 一 个 具有 名 称 的 函数 ， 而 性 能 分 析 工 具 也 就 能 够 正确 地 识别 
表示 该 函数 。 
有 代码 清单 8.19 ”用 于 具有 名 称 的 函数 的 事件 侦 听 器 

// 将 其 命名 为 bar 

foo.addEventListener('click', function bar(event) { 


: // foo 在 发 生 点 击 事件 时 将 会 进行 的 处 理 
， false); 






























































































































































































































































上 代码 清单 8.20 用 于 具有 名 称 的 函数 的 事件 侦 听 器 
// 另外 定义 一 个 名 为 bar 的 函数 
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function bar(event) 


{ 
// foo 在 发 生 点 击 事件 时 将 会 进行 的 处 理 











foo.addEventListener('click', bar, false); 

对 于 上 面 两 种 书写 方式 ， 所 有 的 开发 工具 都 会 将 其 作为 具有 名 称 的 函数 来 显示 。 

不 过 ， 如 果 像 代码 清单 8.21 这 样 书写 ，Internet Explorer 8 的 开发 者 工具 无 法 将 其 识别 为 具有 名 称 的 
函数 。 该 函数 依然 会 显示 为 anonymous function 。 
有 代码 清单 8.21 用 于 Function 对 旬 的 事件 侦 听 器 

// 准备 一 个 名 为 bar 的 Function 对 象 


var bar = function (event) 


{ 
77 £06 在 发 生 点 击 事 位 针 将 会 进行 的 处 理 









































foo.addEventListener('click', bar, false); 


图 网 络 监控 

在 开发 大 量 使 用 AJAX 的 网 页 时 ， 通 过 使 用 网 络 监控 功能 ， 可 以 确认 各 个 请 求 是 否 已 正确 发 送 。 各 
个 请 求 的 请 求 头 部 、 请 求 参数 、 报 文 数据 、 响 应 头 部 、 响 应 体 等 大 部 分 与 该 请 求 相关 的 数据 都 能 够 通过 
这 一 功能 获取 。 

另外 ,该 工具 也 能 够 对 用 于 测量 组 成 网 页 的 HTML 文件 、 图 像 文 件 、JavaScript 文件 等 资源 在 载 入 
过 程 中 需要 花费 多 少时 间 。 


85 | 跨 浏览 器 支持 


如 果 要 通过 多 种 不 同 的 浏览 器 访问 页 面 ， 则 书写 JavaScript 以 及 CSS 时 必须 多 加 注意 。 
HTML 演 染 引擎 与 JavaScript 引 敬 等 共同 组 成 了 一 个 浏览 融 。HTML 演 染 引 敬 将 会 对 HTML 与 CSS 进 
行 解析 ， 并 以 恰当 的 形式 显示 解析 的 结果 。 而 JavaScript 引擎 的 功能 则 是 解析 JavaScript 并 执行 相应 操作 。 
这 里 存在 的 问题 是 ， 主 流 的 浏览 器 各 自 采 用 了 不 同 的 HIML 演 染 引擎 与 JavaScript 引擎 。 因 此 ， 即 
使 访问 的 是 同一 个 网 页 ， 根 据 使 用 的 浏览 器 的 不 同 ， 页 面 的 显示 与 逻辑 操作 上 也 会 有 所 不 同 。 表 8.1 总 
结 了 各 种 浏览 器 所 使 用 的 引擎 。 


























































































































表 8.1 各 种 浏览 器 所 使 用 的 引擎 



































浏览 器 泻 多 JavaScript 引擎 
Internet Explorer Trident JSscript 
Mozilla Firefox Gecko SpiderMonkey 
Google Chrome WebKit V8 
Safari WebkKit JavaScriptCore 
Opera Presto® Charakan 
所 谓 蜂 浏览 器 支持 ， 指 的 就 是 如 何在 使 用 这 些 不 同 的 浏览 器 访问 页 面 时 能 尽 可 能 地 保持 一 致 的 页 面 
显示 与 行为 的 方法 。 
国 8.5.1 应 当 提供 支持 的 浏览 lL 


如 今 ， 世 界 上 已 经 有 各 种 各 样 的 浏览 器 。 从 性 价 比 的 角度 来 看 ， 要 支持 所 有 的 浏览 器 是 没有 实际 意义 的 。 
要 支 持 娜 些 浏 览 咒 ， 取 决 于 用 户 正在 使 用 的 浏览 需 都 有 哪些 。 单 纯 考 虑 浏览 需 的 占有 率 的 话 ， 只 要 























译 者 注 
译 者 注 
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中 Google 于 2013 年 4 月 宣布 Chrome 将 会 在 今后 使 用 xx 泻 染 引擎 。 
@ Opera 于 2013 年 3/4 月 宣布 Opera 将 会 在 今后 使 用 WebKit 泻 染 引 擎 。 
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对 以 下 浏览 器 提供 支持 即 可 。 


@ Internet Explorer 6 及 其 后 继 版 本 @ Safari ( 最 新 版 ) 
@ Google Chrome ( 最 新 版 ) @ Opera ( 最 新 版 ) 


@ Firefox ( 最 新 版 及 其 前 一 版 本 ) 





然而 ， 浏览 器 的 占有 率 是 不 断 变 化 的 ， 每 次 都 要 支持 多 种 浏览 器 也 需要 花费 一 定 的 开发 成 本 。 例 如 ， 
如 果 仅 在 公司 或 学 校 的 系统 内 使 用 的 页 面 ， 在 某 种 程度 上 来 讲 ， 所 使 用 的 浏览 器 往往 是 能 够 确定 的 。 这 
时 ,不 考虑 对 设想 之 外 的 浏览 器 提供 跨 浏览 器 支持 也 没有 什么 问题 。 

在 应 当 提 供 支 持 的 浏览 器 中 ，Internet Explorer 是 比较 麻烦 的 一 种 。 在 Internet Explorer 中 提供 了 很 
多 ECMA-262 不 支持 的 独 有 的 功能 。 对 于 Internet Explorer 的 跨 浏览 器 支持 问题 ， 已 经 有 很 多 开发 者 论述 
过 ， 能 够 找到 很 多 的 相关 人 信息。 因此， 如果 仅 仅 想 要 实现 同样 的 功能 ， 并 不 会 有 太 大 问题 。 不 过 ， 有 时 
JavaScript 可 以 具有 很 复杂 的 功能 ， 这 时 要 实现 其 功能 则 可 能 会 是 一 个 问题 。 

其 中 Internet Explorer 6 是 一 个 特别 麻烦 的 问题 。 与 现在 最 新 的 浏览 器 相 比 ， 它 处 理 JavaScript 的 速 
度 非常 慢 。 如 果 在 制作 页 面 时 发 现 处 理 速 度 过 慢 将 会 引起 问题 的 话 ， 可 以 干脆 明确 表示 该 页 面 不 支持 
Internet Explorer 6。 事 实 上 ，Internet Explorer 9 已 经 开始 逐步 遵循 Web 标准 ， 所 以 如 果 只 考虑 支持 最 新 
版 的 浏览 器 的 话 ， 可 以 说 跨 浏览 器 支持 的 问题 就 几乎 不 存在 了 。 





















































围 3.5.2 实现 方法 





























接 下 来 ,我 们 来 说 明 支 持 多 种 浏览 融 的 代码 的 书写 方法 。 昌 然 只 需要 根据 浏览 右 的 种 类 与 版 本 进行 条 
件 分 六 处 理 即 可 ， 不 过 具体 来 说 应 该 以 什么 作为 条 件 才 合适 还 得 再 考虑 才 行 。 这 里 大 致 有 两 种 分 类 方法 。 



































即 根据 用 户 代理 来 进行 区 分 ， 以 及 根据 功能 是 否 被 支持 来 进行 区 分 。 这 两 者 看 似 差不多 ,但 实质 


不 相同 。 
图 根据 用 户 代理 来 判断 






































所 谓 用 户 代理 ， 指 的 是 用 于 识别 客户 端 应 用 程序 的 字符 串 。 这 并 不 是 一 个 仅 在 浏览 絮 领 域 使 用 的 术 
语 ， 在 搜索 引擎 的 网 络 蜂 蛛 以 及 其 他 一 些 系 统 中 也 会 使 用 。 不 过 在 这 里 所 使 用 的 用 户 代理 特 指 浏览 器 的 


用 户 代 理 。 



























































可 以 通过 Navigator 对 象 的 userAgent 属性 来 取得 用 户 代 理 。 该 值 通常 是 由 浏览 器 的 种 类 、 版 本 、 操 




















作 系统 的 种 类 及 其 类 型 决定 的 。 在 取得 该 值 之 后 ， 就 可 以 由 该 值 对 操作 进行 区 分 以 实现 跨 浏览 融 支 持 。 














虽然 在 Navigator 对 象 中 也 有 appName 、appCodeName 、appVersion 这 样 的 属性 ， 不 过 使 用 这 些 值 是 











无 法 正确 判断 浏览 器 的 。 例 如 对 于 Firefox 4 来 说 ， 上 述 的 属性 值 如 表 8.2 所 示 。 


表 8.2 ”Navigator 对 象 的 属性 的 值 








属性 值 

appName Netscape 
appCodeName Mozilla 
appVersion 5.0 (Windows) 














出 现 这 种 情况 的 原因 ， 是 为 了 让 一 些 在 过 去 使 























j 这 些 值 进行 浏览 器 判断 的 页 面 在 现在 的 浏览 器 上 也 能 

















够 正常 地 被 访问 。 虽 然 确保 兼容 性 也 很 重要 ， 但 这 样 的 做 法 也 造成 了 如 今 无 法 再 通过 这 些 属性 值 对 浏览 
进行 正确 判断 的 局 面 。 现 在 ， 如 果 要 正确 地 识别 浏览 器 ， 就 只 能 依靠 userAgent 的 值 了 。 


















































Firefox4 的 userAgent 的 值 如 下 所 示 。 通 过 该 值 就 能 够 正确 地 对 浏览 器 的 种 类 与 版 本 等 信息 进行 判别 。 








Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0.1) Gecko/20100101 Firefox/4.0.1 
表 8.3 列举 了 一 些 具有 代表 性 的 浏览 器 的 用 户 代理 。 这 里 使 用 的 操作 系统 是 64 位 的 Windows7 。 





中 由 于 版 本 更 新 ， 这 里 的 浏览 器 可 能 并 不 是 其 最 新 版 。 读 者 可 以 自己 确认 最 新 版 的 用 户 代 理 。 
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表 8.3 用 户 代 理 的 值 

浏览 器 用 户 代理 
ozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 
2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET 4.0C; .NET4.0E) 
Firefox 4 ozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0.1) Gecko/20100101 Firefox/4.0.1 
ozilla/5.0 (Windows; U; Windows NT 6.1; ja-JP) AppleWebkKit/533.21.1 (KHTML, like Gecko) 
Version/5.0.5 Safari/533.21.1 
ozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.30 (KHTML, like Gecko) 
Chrome/12.0.742.92 Safari/534.30 

Opera 11.11 Opera/9.80 (Windows NT 6.1; U; js) Presto/2.8.131 Version/11.11 


一 般 来 说 ,用户 代 理会 根据 操作 系统 的 不 同 而 不 同 。 跨 浏览 器 支持 中 通常 只 需 考虑 浏览 器 的 类 型 以 
区 分 。 对 于 同一 种 浏览 器 来 说 ， 并 不 会 因为 操作 系统 的 不 同 而 具有 不 同 泻 染 引 警 及 JavaScript 引擎 。 不 过 
偶尔 也 会 遇 到 因 操 作 系统 不 同 而 导致 渔 染 出 现 差 异 ， 对 此 也 请 加 以 注意 。 

可 以 像 代 码 清单 8.22 这 样 ， 利 用 所 取得 的 用 户 代理 值 对 处 理 分 类 。 


上 代码 清单 8.22 基于 用 户 代理 的 跨 浏览 器 支持 策略 
// 跨 浏览 器 支持 的 事件 侦 听 注册 方法 


var addEvent (target, name, fn) = function() { 
// 判断 正在 访问 该 页 面 的 浏览 器 是 否 是 Internet Explorer 
var isIE = navigator.userAgent.indexOf ('MSIE') > 0; 
iE {Lara) 
// 在 IE 中 不 存在 addEventListener() 方法 ， 因 此 要 换 用 attachEvent () 方法 
addEvent = function(target, name, fn) ' 
target.attachEvent ('on'+name, fn); 


Internet Explorer 9 








Safari 5 





Google Chrome 12 































































































} else { 
// 如 果 不 是 IE， 则 使 用 addEventListener () 方法 
addEvent = function(target, name, fn) { 
target .addEventListener (name, fn, false); 





addEvent (target, name, fn); 


) 
转 根据 功能 是 否 被 支持 来 判断 

在 通过 用 户 代 理 来 进行 分 支 处 理 时 ， 必 须 事 先知 道 该 用 户 代 理 是 否 支持 某 一 功能 ( 能 否 使 用 某 一 函 
数 )。 此 外 ， 虽然 对 于 过 去 的 浏览 器 来 说 ,不 必 担 心 今后 会 再 增加 新 功能 ， 所 以 这 也 就 没有 什么 问题 ,但 
现在 还 在 继续 开发 中 的 浏览 器 则 必定 会 不 断 地 增加 新 的 功能 。 

也 就 是 说 ， 随 着 浏览 器 的 版 本 升级 ,会 增加 新 的 功能 ， 这 可 能 需要 修改 源 代码 。 男 外 ， 根 据 浏览 
的 不 同 ， 有 时 用 户 代理 可 以 自由 修改 (有 时 即使 浏览 器 不 支持 这 一 功能 ， 也 可 以 通过 扩展 程序 来 实现 用 
户 代理 的 修改 )。 虽 然 一 般 来 说 不 必 考 虑 支持 用 户 代理 被 改写 的 情况 ， 但 如 果 和 希望 在 这 种 情况 下 也 能 够 正 
常 执行 操作 的 话 ， 显 然 仅 赁 用 户 代理 是 不 足以 作为 分 支 处 理 的 条 件 的 。 对 于 通过 用 户 代理 进行 条 件 分 支 
判断 的 情况 ， 确 实 可 能 会 有 类 似 问题 产生 。 
只 要 用 户 代理 不 能 够 确保 在 将 来 也 能 够 使 用 某 些 功 能 ， 这 种 分 支 处 理 方 式 就 不 如 直接 通过 判 
断 功 能 是 否 被 支持 来 得 可 靠 。 例如， 对 于 前 一 节 中 所 提 到 的 跨 浏览 器 事件 侦 听 注册 方法 ， 在 支持 
addEventListener( 方法 的 情况 下 使 用 addEventListener() 方法 ， 在 支持 attachEvent0 方法 的 时 候 则 使 用 
attachEvent() 方法 ,会 是 一 种 更 为 直观 的 判断 方式 。 这 时 可 以 像 代码 清单 8.23 这 样 书写 。 


| 代码 清单 8.23 ”基于 功能 测试 的 跨 浏 览 器 支持 策略 
// 跨 浏览 器 的 事件 侦 听 注册 方法 


var addEvent (target, name, fn) = function () { 
if (window.addEventListener) { 
// 如 果 支 持 addEventListener () 方法 则 使 用 该 方法 
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addEvent = function (target, name, fn) { 
target .addEventListener (name, fn, false); 


} else if (window.attachEvent) { 
// 如 果 支 持 attachEvent () 方法 则 使 用 该 方法 
addEvent = function(target, name, fn) 
target . attachEvent ('on'+name, fn); 
) 


} addEvent (target, name, fn); 

国 通过 用 户 代理 判断 与 通过 功能 测试 判断 

通常 无 论 使 用 哪 一 种 方式 ， 都 能 够 正确 无 误 地 判断 分 支 处 理 。 不 过 正如 之 前 所 讲 ， 与 通过 用 户 代理 
进行 分 支 判 断 相 比 ， 对 功能 是 否 被 支持 进行 判断 是 一 种 更 可 靠 的 做 法 ， 所 以 一 般 来 说 ， 应 该 选择 根据 功 
能 是 否 被 支持 来 进行 条 件 分 支 处 理 。 

不 过 也 不 是 说 不 再 使 用 用 户 代 理 信息 进行 判断 了 ， 而 是 说 将 使 用 用 户 代理 的 情况 限定 于 希望 在 特定 
浏览 器 的 特定 版 本 中 进行 特别 的 处 理 时 。 例 如 ， 有 时 问题 的 原因 并 不 是 函数 的 支持 情况 不 同 ， 而 是 CSS 
解析 等 泻 染 引擎 的 行为 差异 。 具 体 来 说 ， 在 正 6 和 正 7 中 常常 需要 进行 分 支 处 理 以 执行 不 同 的 操作 。 这 
时 就 可 以 通过 用 户 代 理 的 值 来 实现 分 支 处 理 。 
基于 用 户 代 理 的 条 件 判断 还 有 一 个 优点 ， 那 就 是 只 需要 对 情况 判断 一 次 即 可 。 在 之 前 的 例子 中 仅仅 
设 定 了 事件 侦 听 的 注册 方法 ， 在 其 他 的 方法 中 也 需要 定义 同样 的 分 支 判断 。 如 果 能 够 通过 用 户 代 理 明确 知 
道 哪些 方法 是 被 支持 ， 就 能 够 只 通过 用 户 代理 判断 情况 ， 而 不 需要 一 次 次 地 判断 功能 是 否 被 广 持 了 。 不 过 
话 虽 如 此 ， 每 次 都 判断 功能 也 不 会 浪费 多 少时 间 ， 所 以 通常 来 说 只 需要 通过 功能 是 否 被 支持 来 判断 即 可 。 












































































































































8.6 | Window 对 象 


在 客户 端 JavaScript 中 ，Window 对 象 是 一 个 全 局 对 象 。Window 对 象 即 对 应 于 正 被 浏览 絮 显 示 的 窗 
口 的 一 种 对 象 。 

Window 对 象 是 JavaScript 所 能 操作 的 最 高 层 的 对 象 。 

以 下 这 些 是 Window 对 象 所 具有 的 一 些 属性 。 


@navigator ®location  @history ©®screen ©®i{rames ©®document ©® parenti, top, self 


冯 83.6.1 Navigator 对 象 | 


Window 对 象 的 navigator 属性 是 一 个 Navigator 对 象 。Navigator 对 象 包含 了 浏览 器 的 版 本 、 浏 览 器 所 
支持 的 插件 、 浏 览 器 所 使 用 的 语言 等 各 种 与 浏览 器 相关 的 信息 。 

在 Navigator 对 象 所 包含 的 信息 中 ， 最 常用 的 是 userAgent 属性 。 可 以 通过 userAgent 属性 来 实现 对 
浏览 器 的 识别 ， 这 在 跨 浏 览 器 支持 中 是 必需 步骤 。 关 于 userAgent 属性 的 使 用 ， 请 参见 8.5 节 。 











































































































国 83.6.2 Location 对 象 | 
Window 对 象 的 location 属性 是 一 个 Location 对 象 。Location 对 象 包含 了 与 当前 显示 的 URL 相关 的 

一 些 信息 。 

国 href 属性 

















通过 href 属性 ， 可 以 引用 现在 正在 显示 的 页 面 的 完整 URL。 该 URL 与 地 址 栏 中 所 显示 的 字符 串 相 同 
(不 过 在 最 近 的 一 些 浏 览 器 中 ， 协 议 以 及 查询 参数 等 信息 会 隐藏 ， 在 这 种 情况 下 两 者 之 间 可 能 会 有 所 不 同 )。 
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如 果 将 hred 属性 设置 为 新 的 值 ， 则 会 跳 转 至 其 他 页 面 。 
Jocation href = neep//foobar examplel com', 
尽管 href 属性 已 经 包含 了 完整 的 URL， 在 Location 对 象 中 仍 有 其 他 一 些 属性 分 别 储存 了 协议 、 主 机 
名 等 URL 的 各 个 元 素 。 如 果 将 这 些 属 性 的 值 相 结 合 ， 则 可 以 得 到 href 属性 的 值 。 表 8.4 总 结 了 Location 
对 象 的 属性 ”。 
表 8.4 ”Location 对 象 的 属性 






























































属性 名 说 明 示例 

protocol 协议 http: 

host, hostname 主机 名 example.com 
port 端 8080 
pathname 路 径 /foo 

search 查询 参数 ?q=bar 

hash 哈 希 令 牌 #baz 




















转 assign() 方法 
可 以 使 用 assign0 方法 从 当前 页 面 跳 转 至 另 一 页 面 。 这 与 设置 href 属性 的 值 的 效果 是 一 样 的 。 


location.assign('http://foobar.example.com'); 
































国 replace() 方法 
通过 replace(0 方法 也 能 从 当前 页 面 跳 转 至 另 一 页 面 。 
location.replace('http://foobar.example.com'); 

在 执行 replace() 方法 后 ， 与 之 前 设 定 href 属性 的 值 一 样 ， 都 会 发 生 页 面 跳 转 。 不 同 的 是 ， 两 者 对 浏 
览 器 历史 记录 的 处 理 有 所 差别 。 对 href 属性 进行 改写 后 浏览 器 的 历史 记录 中 会 有 所 反映 ， 可 以 通过 后 退 
键 返回 之 前 的 页 面 。 

与 之 相对 ，replace0( 方法 不 会 在 历史 记录 中 留 下 信息 ， 因 此 无 法 通过 后 退 键 返回 之 前 的 页 面 。 在 理 
解 了 两 者 对 历史 记录 的 处 理 方式 之 后 ， 就 可 以 根据 情况 选择 对 href 属性 改写 还 是 使 用 replace() 方法 了 。 

转 reload() 方法 

可 以 通过 reload0) 方法 刷新 当前 正在 显示 的 页 面 。 而 根据 传 给 参数 的 boolean 值 的 不 同 ， 刷 新 的 方式 
也 会 有 所 不 同 。 当 传递 true 时 将 会 忽略 浏览 器 的 缓存 ， 强 制 重新 载 和 数据。 如 果 传 递 的 是 false， 则 会 利 
用 浏览 器 的 缓存 来 刷新 页 面 。 


















































































































































location.reload (true); // => 忽略 浏览 器 缓存 刷新 
location.zeload(false) ; // => 利用 浏览 器 缓存 刷新 
location.reload(); // => 与 location.reload (false); 相同 
国 3.6.3 History 对 旬 | 


Window 对 象 的 history 属性 是 一 个 History 对 象 。 
可 以 通过 History 对 象 的 back() 方法 与 forward0 方法 实现 浏览 器 历史 记录 中 的 后 退 与 前 进 。 这 与 按 





























下 浏览 器 的 后 退 键 和 前 进 键 时 的 操作 相同 。 

此 外 ，go0) 方法 也 能 够 实现 同样 的 功能 。go0 方法 可 以 以 参数 所 接收 到 的 整数 值 为 单位 进行 前 进 或 
后 退 操作 。 如 果 传 递 的 是 正 值 ， 则 前 进 ， 如 果 传 递 的 是 负 值 ， 则 后 退 。 

history.back(); // 在 历史 记录 中 后 退 

history.forward(); // 在 历史 记录 中 前 i 





中 ”例子 中 的 URL 是 http://example.com:8080/foo?q=bar#baz 
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history.go (1); // 在 历史 记录 中 前 进 一 次 。 与 history .forward() ; 相同 
history.go(-2); // 在 历史 记录 中 后 退 两 次 。 
国 8.6.4 Screen 对 象 | 


Window 对 象 的 screen 属性 是 一 个 Screen 对 象 。 

Screen 对 象 包含 了 画面 的 大 小 与 发 色 数 等 信息 。 通 过 这 些 值 ， 能 够 针对 大 尺寸 的 显示 器 和 小 尺寸 的 
幕 分 别 显 示 不 同 的 画面 。 
虽然 还 能 够 实现 将 窗口 移动 至 画面 中 央 的 功能 ， 不 过 随意 移动 窗口 通常 会 招致 用 户 的 反感 ， 因 此 
必须 加 以 注意 。 在 最 近 的 客户 端 JavaScript 开发 中 ， 几 乎 没有 什么 能 够 有 效 利 用 Screen 对 象 的 情况 。 


天 3.6.5 对 window 对 和 象 的 引用 | 


国 window 属性 

可 以 通过 window 属性 获取 对 Window 对 象 的 引用 。window 属性 所 指向 的 Window 对 象 在 JavaScript 
中 是 一 个 全 局 对 象 。 

也 就 是 说 ， 在 客户 端 JavaScript 中 所 操作 的 所 有 函数 与 对 象 都 是 window 属性 所 引用 的 这 个 对 象 的 属性 。 
国 frames 属性 

当 窗 口中 含有 多 个 框架 时 ，frames 属性 中 将 会 含有 这 些 框架 的 引用 。 如 果 没 有 框架 ，frames 属性 中 
则 是 一 个 空 的 数组 。 可 以 通过 <frameset> 标签 、<frame> 标签 ， 或 <iframe> 标签 来 生成 一 个 框架 。 无 论 
通过 哪 种 方式 生成 ，JavaScript 都 会 以 同样 的 方式 对 其 引用 。 

而 框架 本 身 也 是 一 种 Window 对 象 ， 因 此 可 以 以 


window.frames [1] .frame [2] 


这 样 的 方式 取得 某 个 框架 中 的 男 一 框架 ( 以 下 称 为 子 框 架 ) 的 引用 。 





































































































































































































图 self 属性 

可 以 通过 self 属性 对 Window 对 象 自身 引用 。self 属性 与 window 属性 一 样 ， 引 用 了 一 个 Window 对 象 。 
国 parent 属性 

可 以 通过 parent 属性 从 子 框架 处 取得 其 父 框 架 的 引用 。 如 果 不 存在 父 框架 ，parent 属性 则 是 对 当前 


Window 对 象 自身 的 一 个 引用 。 
图 top 属性 

如 果 要 在 框架 层 层 能 套 的 情况 下 获取 最 上 层 的 框架 的 引用 ， 可 以 使 用 top 属性。 如果 自 身 就 是 最 上 
层 的 框架 ，top 属性 则 是 对 当前 Window 对 象 自 身 的 一 个 引用 。 

总 之 ， 如 果 自 己 就 是 最 上 层 的 Window 对 象 的 话 ，window、self、parent 、top 都 将 是 对 同一 
Window 对 象 的 引用 。 


















































国 83.6.6 Document 对 和 旬 | 
Window 对 象 的 document 属性 是 一 个 Document 对 象 。 关 于 Document 对 象 的 详细 信息 ， 将 在 第 9 章 
中 说 明 。 


对 Cookie 的 操作 是 Document 对 象 中 不 属于 DOM 范畴 的 一 种 功能 。 尽 管 通过 HTML5 的 Web 
Storage 或 Indexed Database， 浏 览 器 自身 也 能 够 保存 一 定 的 数据 ， 但 在 没有 实现 这 些 功能 之 前 Cookie 是 
E 种 可 以 保存 数据 的 方式 。 可 以 通过 Document 对 象 的 cookie 属性 对 Cookie 进行 读 写 操作 。 
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JavaScript 借助 DOM ( Document Object Model， 文 档 对 象 模 型 ) 对 HTML 进行 操作 。 利 
用 DOM 这 种 标准 方式 ， 无 论 哪 种 浏览 器 都 可 以 以 同样 的 方式 来 操作 HTML 文档 。 只 要 理解 
DOM， 就 能 够 自由 地 操作 Web 页 面 。 


9.1 DOM 的 定义 


在 希望 通过 JavaScript 来 对 页 面 的 内 容 进 行 操作 时 ， 如 果 文 档 的 内 容 与 结构 能 够 以 一 种 便于 程序 处 
理 的 形式 表现 ， 无 疑 会 给 处 理 带 来 方便 。 比 如 说 ， 虽 然 可 以 直接 修改 以 字符 串 形 式 表示 的 HTML 资源 内 
容 ， 但 如 果 可 以 对 “id 是 foo 的 <div> 标签 ”, 或 “所 有 的 <a> 标签 ”这 样 的 集合 进行 操作 ， 则 程序 的 可 
读 性 会 更 高 ， 书 写 也 较为 简单 。 为 此 ，JavaScript 中 引入 了 DOM 的 概念 。 

DOM 是 一 种 API， 其 作用 为 在 程序 中 使 用 HTML 文档 以 及 XML 文档 。 在 DOM 中 ，HTML 文档 与 
XML 文档 会 以 树 形 对 象 集合 的 形式 被 使 用 。 这 一 树 形 结构 称 为 DOM 树 。 

DOM 树 中 的 一 个 个 对 象 被 称 为 节点 。 节 点 之 间 形 成 了 一 个 树 形 结 构 ， 树 中 的 某 个 节点 可 能 会 引用 另 
外 一 个 节点 。 根 据 引 用 关系 ， 分 别 有 父 节 点 、 子 节点 、 兄 弟 节点 、 祖 先 节点 、 子 孙 节 点 等 类 型 。 

根据 W3C 的 定义 ，DOM 可 以 分 为 Levell 一 3 这 几 层 。 

















































































































国 9.1.1 DoM Level 1 | 


DOM Level 1 是 由 Core 与 HTML 这 两 个 模块 组 成 的 ( 表 9.1 )。 在 DOM Level 1 Core 中 包含 很 多 操 
作 DOM 树 的 方法 。 表 9.2 介绍 了 DOM Level 1 Core 中 定义 的 一 些 基 本 方法 ， 更 为 详细 的 内 容 会 在 之 后 
进一步 说 明 。 


表 9.1 DOM Level 1 的 模块 一 览 





















































模块 说 明 
Core 对 包括 HTML 在 内 的 基本 DOM 操作 提供 支持 
HTML 对 一 些 专 HTML 文档 的 方法 提供 支持 























表 9.2 DOM Level 1 Core 

















方法 名 说 明 

getElementsByTagName 根据 指定 的 标签 名 来 获取 元 素 

createElement 创建 新 元 素 

appendChild 插入 元 素 

国 9.1.2 DoM Level 2 | 








与 DOM Level 1 相 比 ，DOM Level 2 中 包含 了 很 多 模块 。 其 中 包括 Events 这 样 与 addEventListener() 
等 事件 处 理 方法 相关 的 模块 ， 或 者 DOM Level 1 中 Core 模块 以 及 HTML 模块 的 扩展 模块 。 
CSS 也 是 在 DOM Level 2 中 定义 的 模块 。 表 9.3 列举 了 DOM Level 2 包含 的 模块 。 可惜 的 是 ， 
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Internet Explorer 8 以 及 更 早 的 版 本 并 没有 遵循 DOM Level 2 标准 。 而 Firefox 或 Google Chrome 等 现代 浏 
览 絮 则 几乎 完全 支持 DOM Level 2。 


表 9.3 DOM Level 2 所 包含 的 模块 一 览 











模块 说 明 

Core Level 1 Core 的 扩展 

HTML Level 1 HTML 的 扩展 

Views 对 与 文档 显示 状态 相关 的 功能 提供 支持 















































Events 对 捕获 、 冒 泡 、 取 消 等 事件 系统 提供 支持 
Styles 对 与 样式 表 相关 的 功能 提供 支持 
Traversal and Range 对 DOM 树 的 遍历 以 及 范围 的 指定 提供 支持 



























































国 9.1.s DOM Level 3 


DOM Level 3 是 由 表 9.4 中 所 示 的 模块 所 组 成 的 ， 其 中 Events 模块 还 没有 达到 推荐 使 用 的 程度 。 不 
过 在 现代 浏览 器 中 ，Event 模块 中 所 定义 的 一 些 内容 已 经 提前 实现 。 


表 9.4 DOM Level 3 所 包含 的 模块 一 览 
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模块 说 明 

Core Level 2 Core 的 扩展 

Load and Save 对 文档 内 容 的 读 取 与 写 入 提供 支持 

Validation 对 文档 内 容 合法 性 的 验证 提供 支持 

XPath 对 XPath 相关 的 功能 提供 支持 

Events Level 2 Events 的 扩展 。 对 键盘 事件 提供 了 支持 
专栏 

DOM Level 0 


























在 DOM 标准 制定 之 前 ， 各 种 浏览 器 所 采用 的 对 象 模型 被 称 为 DOM Level 0。DOM Level 0 也 称 为 传统 
DOM。 虽 然 DOM Level 0 并 不 能 算是 一 种 被 正确 定义 的 标准 ， 但 为 了 与 过 去 的 浏览 器 相 兼容 ， 现 在 的 浏览 
器 中 仍然 支持 DOM Level 0 中 的 功能 。DOM Level 0 中 含有 Window、Document、Navigator、Location、 
History 等 对 象 。 不 过 , 在 Document 对 象 中 也 有 一 些 在 DOM Level 1 中 被 定义 的 APl, 所 以 不 能 说 以 上 这 些 
对 象 都 是 属于 DOM Level 0 的 内 容 。 

此 外 ， 虽 然 DOM Level 0 并 不 能 算是 一 种 标准 ， 但 是 它 所 包含 的 一 些 对 象 却 是 符合 HTML5 标准 的 。 很 多 过 
浏览 器 开发 商 自 主 实现 的 功能 现在 也 都 成 为 了 标准 。 还 有 一 些 功能 虽然 还 没有 成 为 标准 ,但 也 已 经 处 于 标准 起 
草 阶段 了 。 这 些 由 浏览 器 开发 商 自 主 实现 的 功能 为 了 不 与 DOM 标准 中 所 定义 的 属性 名 或 名 称 冲 突 ,常常 会 根据 开 
商 的 不 同 分 别 在 名 称 前 加 上 前 级 。 其 中 的 很 多 被 用 于 CSS 的 属性 或 JavaScript 的 函数 名 中 。 例 如 , 在 Firefox 
时 用 了 moz 这 一 前 级 ， 而 在 Google Chrome 与 Safari 所 使 用 的 WebkKit 中 则 使 用 了 webkit 这 一 前 级 。 
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如 流 



































于 9.1.4 DOM 的 表述 方式 
可 以 通过 下 面 的 方式 书写 DOM。 
接口 名 . 方法 名 0 












































接口 名 . 属性 名 
虽然 这 种 写法 会 使 DOM 的 书写 变 得 元 长 ,但 以 这 样 的 方式 书写 JavaScript 代码 就 可 以 清楚 地 知道 正 
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在 对 哪 一 个 接口 的 对 象 进行 操作 ， 将 有 助 于 增进 对 代码 的 理解 。 所 以 还 是 应 采用 这 种 方法 。 同 时 ， 在 方 
法 名 之 后 接 上 0 之 后 ， 就 能 够 清楚 地 知道 该 元 素 是 一 个 方法 。 


| 9.2 DOM 的 基础 





转 9.2.1 标签 、 元 素 、 节 点 | 
在 对 HTML 以 及 DOM 进行 讨论 时 ， 我 们 常常 会 混用 标签 、 元 素 、 节 点 等 术语 。 故 在 此 再 次 对 它们 
的 定义 进行 确认 。 
国 标签 
标签 是 一 种 用 于 标记 的 字符 串 ， 其 作用 为 对 文档 的 结构 进行 指定 。 通 常 都 会 有 起 始 标签 与 结束 标签 。 
在 结束 标签 中 ， 有 一 些 可 以 被 省 略 ， 如 <p> 标签 。 同 时 也 有 一 些 标签 不 存在 结束 标签 ， 例 如 <input> 标签 
(代码 清单 9.1 )， 说 到 底 标签 只 是 用 于 书写 场合 ， 在 谈论 DOM 的 话题 时 几乎 不 会 使 用 。 
上 代码 清单 9.1 标签 
















































































<div><!-- div 的 起 始 标签 --> 
ae p 的 结束 标签 可 以 省 略 = 
<input type="button"> <!-- input 只 有 起 始 标 签 而 没有 结束 标签 --> 


</div><!-- div 的 结束 标签 --> 


国 元 素 、 节 点 

比较 容易 产生 混淆 的 是 元 素 和 节点 的 概念 。 元 素 和 节点 之 间 略 有 一 些 继承 关系 ， 其 中 节点 是 父 类 概 
念 。 贡 点 具有 nodeType 这 一 属性 ， 如 果 其 值 为 ELEMENT_NODE(1)， 该 节点 则 是 一 个 元 素 。 

表 9.5 总 结 了 HTML 文档 常用 的 节点 "。 




















表 9.5 在 HTML 文档 中 使 用 的 节点 






































节点 类 型 常量 节点 类 型 的 值 
元 素 节点 ELEMENT_NODE 1 Element 
属性 节点 ATTRIBUTE_NODE 2 Attr 
文本 节点 TEXT_NODE 3 Text 
注释 节点 COMMENT_NODE 8 Comment 
文档 节点 DOCUMENT_NODE 9 Document 
国 9.2.2 DOM 操作 | 























JavaScript 的 作用 是 使 网 页 能 够 执行 某 些 功能 。 为 了 实现 这 些 功能 ， 必 须 对 DOM 进行 操作 。 通 过 选 
择 某 个 DOM 元 素 并 改写 其 属性 ， 或 创建 一 个 新 的 DOM 元 素 ， 就 能 够 给 予 用 户 视 觉 反 馈 ， 以 实现 交互 功 
能 。 之 后 ， 将 从 选择 〈9.3 节点 的 选择 )、 创 建 〈9.4 节点 的 创建 与 新 增 )、 更 改 (9.5 节点 的 内 容 变 更 ) 与 
删除 ( 9.6 节点 的 删除 ) 四 个 方面 对 DOM 的 相关 操作 进行 说 明 。 


国 9.2.3 Document 对 象 | 


Document 对 象 是 DOM 树 结 构 中 的 根 节 点 。 虽 然 这 是 一 个 根 节 点 ,在 HTML 文档 中 却 不 用 书写 其 对 
应 的 标签 。 例 如 ， 虽 然 <html> 标签 与 <body> 标签 分 别 对 应 Document 对 象 中 的 documentElement 属性 与 
body 属性 ， 但 却 没 有 与 Document 对 象 自身 相对 应 的 标签 。 这 是 因为 Document 对 象 是 一 种 用 于 表示 整个 













































































中 ”在 本 章 中 ， 元 素 一 词 所 指 代 的 对 象 仅 指 元 素 节点 。 对 于 不 局 限于 元 素 节点 的 情况 ， 将 使 用 节点 一 词 来 指 代 广 义 的 节点 。 
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HTML 文档 的 对 象 。 

可 以 通过 人 中 的 document 这 一 全 局 变量 来 访问 Document 对 象 。 准 确 地 说 ，document 是 
window 对 象 中 的 一 个 属性 。 不 过 ， 由 于 window 对 象 是 一 个 全 局 对 象 ， 因 此 在 对 其 属性 进行 访问 时 可 以 
将 window. 省 a ; 

实际 上 ， 在 通过 JavaScript 表示 HTML 文档 时 ， 所 有 的 全 局 变量 都 是 window 对 象 的 属性 。 可 以 通 
过 下 面 的 代码 对 此 进行 确认 。 


var global variable = 'Global Variable'; 
alert (window.global variable) === global variable); // => true 


顺便 提 一 下 ，window 对 象 并 没有 包含 于 DOM 树 结构 之 中 。 如 前 面 所 讲 ，Document 对 象 在 DOM 树 
结构 中 是 根 节 点 ， 因 此 也 无 法 通过 下 面 将 要 介绍 的 方法 来 取得 Document 对 象 的 父 节点 


| 95 节点 的 选择 



















































































故 9.3.1 通过 ID 检索 | 


在 JavaScript 中 ， 如 果 要 对 HTML 文档 中 的 指定 节点 进行 选择 ，Document.getElementById(0) 方法 是 
一 种 最 为 常见 的 手段 。 该 方法 可 以 像 下 面 这 样 书写 。 


var element = Qocument .getElementById('foo'); 


这 样 就 能 够 取得 ID 为 foo 的 元 素 。ID 在 DOM 树 中 必须 是 唯一 的 。 在 DOM 中 并 没有 对 存在 多 个 相 
同 ID 的 情况 做 出 规定 。 不 过 ， 大 部 分 的 浏览 器 都 采用 了 返回 第 一 个 找到 的 元 素 的 方式 。 

不 过 即便 如 此 ， 也 不 应 该 根据 这 一 规则 来 进行 设计 。 这 样 的 做 法 是 错误 的 ，ID 必须 是 唯一 的 (代码 
清单 9.2 )。 


| 代码 清单 9.2 在 同时 存在 多 个 相同 ID 时 getElementByld() 方法 的 行为 


el lela ee el 
<div id="foo">second</div> 
Se 
var element = document .getElementByIld('foo'); 
alert (element .innerHTML); // => 大 部 分 浏览 器 都 会 可 first。 不 过 这 并 不 是 一 种 绝对 标准 
/eeriles 





















































故 9.3.2 通过 标签 名 检索 | 
可 以 通过 下 面 这 样 的 方式 ， 使 用 Element.getElementsByTagName0) 方法 来 取得 具有 该 标签 名 的 所 有 
节点 。 标 签名 还 可 以 使 用 *' 作 为 通配符 。 可 以 通过 *' 来 获取 所 有 元 素 。 


var spanElements = document .getElementsByTagName ('span'); Wa 仅 获取 span 元 素 
var allElements = document .getElementsByTagName ('*'); // 获取 所 有 的 元 素 






















































































Document.getElementById0 是 只 存在 于 Document 对 象 中 的 方法 ， 而 Element.getElementsByTagName() 
则 是 同时 存在 于 Document 对 象 与 Element 对 象 这 两 者 中 的 方法 。 在 执行 某 个 Element 对 象 的 
getElementsByTagName() 方法 时 ， 该 Element 对 象 的 子孙 节点 中 具有 指定 标签 名 的 元 素 也 将 被 获取 ( 代 
码 清单 9.3 )。 


| 代码 清单 9.3 getElementByld() 与 getElementsByTagName() 


























<body> 
< oo 
<span>a</span> 
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<span>b</span> 
<span>c</span> 

关内 外 S 

SI Melson YS 
<span>x</span> 

总 /到 

<script> 
Var foo = document .getElementById('foo'); 
// 在 Element 对 象 中 没有 getElementById() 方法 
alert (foo.getElementById) // => undefined 
// 在 Element 对 象 中 存在 getElementsByTagName () 方法 





alert (foo.getElementsByTagName) // => function getElementsByTagName() { [native code] } 
// 从 foo 的 子孙 节点 中 取得 元 素 span 

var fooSpans = foo.getElementsByTagName('span'); 

alert (fooSpans.length); ni 


// 从 整个 文档 中 获取 元 素 span 
var allSpans = document .getElementsByTagName ('span'); 
alert (allSpans.length); // => 4 

ET 

</body> 


围 Live 对 象 的 特征 

在 这 里 需要 注意 的 是 ，getElementsByTagName() 所 能 取得 的 对 象 是 一 个 NodeList 对 象 ， 而 不 是 单纯 
的 Node 对 象 的 数组 。 而 NodeList 对 象 的 一 大 特征 就 是 它 是 一 个 Live 对 象 。 可 以 写 出 代码 清单 9.4 这 样 
的 代码 。 
| 代码 清单 9.4 Live 对 象 


ET Eoou> 
<span>first</span> 
<span>second</span> 











</div> 

ES 
var elems = document .getElementsByTagName ('span'); 
alert (elems.length); 多重 三 


var newSpan = Qocument .createEglement ('span'); 
newSpan.appendChild (document .createTextNode('third')) 
Var foo = document .getElementBy1Id('foo'); 
foo.appendChild (newSpan); 
alert (elems .length); 全 3 

SETTE 


在 上 面 的 代码 中 ， 最 初 取 得 的 elems.length 值 为 2， 这 是 很 显然 的 。 之 后 ， 通 过 JavaScript 新 增 了 一 
个 span 元 素 。 再 一 次 显示 elems.length 时 其 值 变 为 了 3。 

如 果 是 在 新 增 了 span 之 后 再 执行 getElementsByTagName(0， 自 然 不 会 觉得 有 什么 问题 ， 但 这 里 明明 
是 一 个 在 新 增 span 之 前 就 已 经 取得 的 NodeList 对 象 ， 却 能 够 知道 新 增 了 span 之 后 的 状态 ， 是 不 是 觉得 
有 点 奇怪 ? 而 这 就 是 Live 对 象 的 一 个 特征 。 

Live 对 象 始 终 具 有 DOM 树 实体 的 引用 。 因 此 ， 对 DOM 树 做 出 的 变更 也 会 在 Live 对 象 中 得 到 体现 。 


转 在 对 Live 对 象 进行 操作 时 的 注意 点 
在 使 用 Live 对 象 时 ， 必 须 对 代码 清单 9.5 中 这 样 的 for 循环 多 加 注意 。 
| 代码 清单 9.5 “Live 对 象 中 存在 的 陷阱 


<div>sample text</div> 
<script> 
Var divs = document .getElementsByTagName ('div'); 
var newDiv; 
fOr (va one SEE 
newDiv = document .createElement ('div'); 
newDiv.appendChild(document .createTextNode('new div')) 
vse ed 
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el ie 


在 上 面 的 代码 中 ， 将 会 首先 取得 所 有 的 div 元 素 ， 然 后 在 for 循环 中 创建 新 的 div 元 素 并 添加 至 这 些 
div 元 素 中 。 于 是 ， 作 为 循环 条 件 的 divs.length 的 值 将 会 不 断 地 增加 1， 而 无 法 离开 循环 。 对 于 这 种 情况 ， 
只 要 在 开始 时 对 divs.length 进行 求 值 ， 就 可 以 避免 无 限 循环 (代码 清单 9.6 )。 


| 代码 清单 9.6 ”避免 进入 Live 对 象 中 的 陷阱 


<div>sample text</div> 
Esc 
Var divs = document .getElementsByTagName ('div'); 
Var newDiv; 
// 先 取 得 divs .length 的 值 ， 并 以 此 作为 循环 的 条 件 
for var omen dv lenegehne i emer) 
newDiv = document .createElement ('div'); 
newDiv.appendChild(document .createTextNode('new div')); 
divs[i] .appendChild (newDiv); 
































/eeripes 


国 Live 对 象 的 性 能 
Live 对 象 是 否 方便 取决 于 具体 的 使 用 场景 ， 不 过 如 果 只 对 性 能 进行 讨论 的 话 ， 它 的 性 能 确实 是 较 差 
的 。 与 直接 使 用 getElementsByTagName0) 的 结果 的 情况 相 比 ， 先 将 该 结 果 转 换 为 Array 之 后 再 进行 使 用 
性 能 更 好 。 
可 以 通过 Array.prototype.slice() 方法 将 一 个 NodeList 对 象 转换 为 一 个 Array ( 代码 清单 9.7 )。 


| 代码 清单 9.7 ” getElementsByTagName() 的 返回 值 



























































Var nodeList = document .getElementsByTagName ('span'); 


alert (nodeList instanceof NodeList); // => true 
alert (nodeList instanceof Array); We 
var array = Array.prototype.slice.call (nodeList); // 将 NodeList 对 象 转换 为 Array 对 象 
alert (nodeList instanceof NodeList); // => false 
alert (nodeList instanceof Array); // => true 








不 过 ， 这 种 方法 不 适用 于 Internet Explorer 8 以 及 更 早 的 版 本 。 如 果 使 用 Array.prototype.slice() 
方法 来 处 理 Element.getElementsByTagName() 就 会 发 生 错 误 。 因 此 ， 如 果 要 将 其 转换 为 Array， 就 
不 得 不 对 一 个 个 元 素 进 行 设置 。 进 一 步 来 讲 ， 在 Internet Explorer 8 以 及 更 时 的 版 本 中 ，Element. 
getElementByTagName() 所 获取 的 并 不 是 NodeList 对 象 ， 而 是 一 个 HTMLCollection 对 象 。 这 与 DOM 
Level 1 的 定义 是 不 一 致 的 。Element.getElementsByTagName0 方法 应 该 返回 一 个 NodeList 才 对 。 顺 便 提 
一 下 ，HTMLCollection 也 是 一 种 Live 对 象 ， 在 这 一 点 上 它 与 NodeList 是 相同 的 ( 代码 清单 9.8 )。 


| 代码 清单 9.8 Internet Explorer 中 的 getElementsByTagName() 
// 在 Internet Explorer 8 以 及 更 早 的 版 本 中 运行 


var htmlCollection = document .getElementsByTagName ('span'); 


























alert (htmlCollection instanceof HTMLCollection); // => true 

alert (htmlCollection instanceof NodeList); // => false 

alert (htmlCollection instanceof Array); // => false 

for (var i = 0, len = htmlCollection.length; i < len; i++) { 
arravla hemeolleer re 








可 以 通过 执行 代码 清单 9.9 中 这 样 的 代码 对 NodeList 的 性 能 进行 确认 。 
| 代码 清单 9.9 根据 NodeList 的 操作 方式 不 同 ， 其 性 能 也 会 有 所 差异 
eb 


<!-- 写 有 1000 个 <span> 标签 --> 
</div> 
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SCE 
var elems, len; 
// 直接 使 用 NodeList， 且 每 次 获取 其 length 
console.time(' 直接 使 用 NodeList， 且 每 次 获取 其 length'); 
elems = document .getElementsByTagName ('span'); 





Fo (ver 0 00 
for (var j] = 0; j < elems.length; j++) { 
elems [j]; 


} 

console .timegEnd(' 直接 使 用 NodeList， 且 每 次 获取 其 length'); 
// 直接 使 用 NodeList 

console.time(' 直接 使 用 NodeList'); 

elems = document .getElementsByTagName('span'); 

len = elems.length; 














for var 1 0 T0007 
ES en 
elems [j]; 


} 

console.timeEnd(' 直接 使 用 NodeList'); 

// 将 其 转换 为 Array 后 使 用 ， 且 每 次 获取 其 length 
console.time(' 将 其 转换 为 Array 后 使 用 ， 且 每 次 获取 其 length'); 
// 在 Internet Explorer 8 以 及 更 早 版 本 中 将 会 产生 错误 


elems = Array.prototype.slice.call (document .getElementsByTagName ('span')); 





























for (var 1 0 T0000 
for (var j] = 0; j < elems.length; j++) { 
elems[j]; 


} 
} 
console.timeEnd(' 将 其 转换 为 Array 后 使 用 ， 且 每 次 获取 其 length'); 
// 将 其 转换 为 Array 后 使 用 
console.time(' 将 其 转换 为 Array 后 使 用 '); 
// 在 Internet Explorer 8 以 及 更 早 版 本 中 将 会 产生 错误 
elems = Array.prototype.slice.call (document .getElementsByTagName ('span')); 
len = elems.1length; 














Fo (var 0 0 T0000 en 
for (var no en 
elems [j]; 


} 
} 
console .timeEnd(' 将 其 转换 为 Array 后 使 用 '); 
</serines 
运行 结果 如 下 所 示 。 可 以 看 到 ， 通 过 NodeList 对 象 获取 元 素 将 会 花费 相当 的 时 间 ， 同 时 对 length 属 
性 进行 引用 也 会 产生 一 些 时 间 上 的 开销 。 
通过 这 段 代 码 不 难 理解 ， 要 在 for 循环 中 使 用 NodeList 时 ， 先 将 其 转换 为 Array 对 象 后 再 使 用 比较 好 。 


直接 使 用 NodeList， 且 每 次 获取 其 length: 276ms 
直接 使 用 NodeList: 155ms 


























将 其 转换 为 Array 后 使 用 ， 且 每 次 获取 其 length: 22ms 
将 其 转换 为 array 后 使 用 : 20ms 





除了 NodeList 外 ， 还 有 其 他 的 Live 对 象 。 前 面 提 到 过 ，HTMLCollection 也 是 一 个 Live 对 象 。 在 
Internet Explorer 8 以 及 更 早 的 版 本 中 ，getElementsByTagName0 将 会 返回 一 个 HTMLCollection 对 象 。 此 
外 ， 用 于 容纳 文档 中 的 表单 对 象 的 document.forms 等 也 都 是 HIMLCollection 对 象 。 表 9.6 总 结 了 DOM 
Level 1 中 定义 的 HTMLCollection 对 象 。 








表 9.6 在 DOM Level 1 中 定义 的 HTMLCollection 

















HTMLCollection 说 明 

document.images 文档 中 所 有 的 img 元 素 

document.applets 文档 中 所 有 的 Java Applet 对 象 

document.links 文档 中 所 有 的 链接 元 素 ( 那些 被 指定 了 href 属性 的 元 素 ) 
document.forms 档 中 所 有 的 form 元 素 
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( 续 ) 
document.anchors 文档 中 所 有 的 锚 元 素 ( 那些 被 指定 了 name 属性 的 元 素 ) 
form.elements 表单 中 所 有 的 input 元 素 
map.areas 图 像 映射 中 所 有 的 area 元 素 
table.rows 表格 中 所 有 的 tr 元 素 
table.tBodies 表格 中 所 有 的 tbody 元 素 
tableSection.rows 表格 区 段 ( thead 元 素 、tfoot 元 素 ) 中 所 有 的 tr 元 素 
row.cells 表格 的 一 行 中 所 有 的 td 元 素 与 th 元 素 


























由 于 Live 对 象 的 这 一 性 能 问题 ， 通 常 都 会 将 Live 对 象 先 转换 为 Array， 之 后 再 作为 结果 返回 。 这 一 
部 分 的 操作 通常 会 很 好 地 隐藏 起 来 ， 因 此 并 不 需要 做 什么 额外 人 处理。 如 果 运 行 结果 和 预想 的 情况 不 同 ， 
则 应 该 尝试 确认 所 返回 的 对 象 是 否 是 Live 对 象 。 这 一 步骤 随处 存在 潜在 的 陷阱 。 

虽然 在 编写 JavaScript 程序 的 过 程 中 不 需要 过 寸 分 在 意 变 量 的 数据 类 型 ， 但 在 实际 的 开发 中 也 不 要 忘 
“对 象 毕竟 还 是 具有 某 种 数据 类 型 的 ”这 一 事实 。 


国 9.3.3 通过 名 称 检索 | 


通过 HTMLDocument.getElementsByName() 方法 ， 可 以 将 name 属性 的 值 作为 限定 条 件 来 获取 属性 。 
不 过 因为 只 能 在 form 标签 或 input 标签 等 标签 中 使 用 name 属性 ， 所 以 与 getElementById0 相 比 ， 它 的 使 
用 频率 较 低 。 


国 9.3.4 通过 类 名 检索 | 


通过 使 用 HTMLElement.getElementsByClassName() 方法 ， 就 可 以 获取 指定 类 名 的 元 素 (代码 清单 
9.10 )。 其 中 的 类 名 可 以 指定 多 个 值 。 如 果 想 要 指定 多 个 类 名 ， 则 需要 使 用 空白 符 作 为 分 隔 字符 串 。 也 就 是 
类 似 于 'classA classB' 的 形式 。 这 时 ， 会 取得 classA 与 classB 这 两 个 类 名 所 指定 的 元 素 。 

该 方法 并 不 属于 DOM Core 或 DOM HTML 标准 ， 而 是 一 种 HTML5 规定 的 功能 。 不 过 在 实际 使 用 
中 并 不 需要 对 此 过 于 在 意 。 

从 这 是 一 个 在 HTMLS5 标准 中 定义 的 方法 这 一 点 上 也 能 知道 ， 只 有 现代 的 浏览 器 才 对 该 方法 提供 了 
支持 。 在 Internet Explorer 8 以 及 更 早 的 版 本 中 无 法 使 用 这 一 方法 。 不 过 其 实在 很 多 JavaScript 库 中 ， 都 
有 类 似 于 getElementsByClassName() 这 一 方法 的 实现 ， 所 以 只 要 利用 库 的 话 ， 同 样 能 够 简单 地 在 Internet 
Explorer 8 以 及 更 早 的 版 本 中 使 用 这 样 的 功能 。 


| 代码 清单 9.10 getElementsByClassName() 方法 
























































































































































<body> 
Io es Se 
<span class='matched'>a</span> 
<span class='matched unmatched'>b</span> 
<span class='unmatched'>c</span> 
</p> 
= uo oa 
<span class='matched'>x</span> 
</p> 
<Serioes 
Var foo = document .getElementById('foo'); 
// 从 foo 的 子孙 节点 中 获取 被 指定 为 matched 类 的 元 素 
Var fooMatched = foo.getElementsByClassName ('matched'); 
alert (fooMatched.1length); ES 
// 如 果 要 指定 多 个 类 名 ， 则 需要 通过 空白 符 分 隔 
alert (foo.getElementsByClassName ('matched unmatched') .length);// => 1 
// 在 指定 了 多 个 类 名 的 时 候 ， 改 变 类 名 间 的 顺序 也 不 会 有 什么 影响 
alert (foo.getElementsBYyClassName ('unmatched matched') .length);// => 1 


// 从 整个 文档 中 获取 类 名 为 matched 的 元 素 
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var allMatched = document .getElementspByClassName ('matched'); 


alert (allMatched.length); 
Neem 
</body> 


国 .3.5 


六 江 占 


2 节点 VAN AS 


2 ES 马 


3 节点 VAN AS 兄弟 节 ea VIA 





接 下 来 将 说 明 如 何 获取 某 个 节 
用 其 他 节点 的 属性 ( 表 9.7)。 


点 的 父 








节点 、 子 节点 以 及 兄弟 节点 。 在 一 个 节点 中 包含 了 一 些 用 于 引 












































表 9.7 一 些 用 于 引用 相关 节点 的 属性 
能 够 获取 的 节点 

parentNode 父 节 点 
childNodes 子 节点 列表 
firstChild 一 个 子 节点 
lastChild 最 后 一 个 子 节点 
nextSibling 下 一 个 兄弟 节 
previousSibling 上 一 个 兄弟 节点 

此 外 ， 空 白 符 也 会 作为 文本 节点 处 理 。 换 行 符 也 包含 在 这 种 情况 之 中 。 et 
确保 可 读 性 ， 通 常会 在 标签 之 间 加 入 一 些 换 这 样 一 来 在 换行 处 就 会 存在 一 些 空 白 节 点 。 于 
是 ， 在 使 用 firstChild 的 时 候 就 会 首先 取得 这 些 空白 节点 。 在 通过 firstChild wy 请 务必 对 


此 加 以 注意 (代码 清单 9.11 )。 


| 代码 清单 9.11 用 于 引用 相关 节点 的 属性 的 具体 使 用 示例 























<body> 
el oboelE el 
<div id="b"></div> 
=uyv eid rmy 
ol en 
<div id="d"></div> 
本 ES 
<div id="e"></div> 
</div> 
= /a <div ld = e/a 
</diwvs 
ee 
var my = document .getElementById('my'); 
var elem; 
elem = my.parentNode; 
alert (elem.id); MY 3 Va 
WA。 和 元素 
elem = my.firstChild; 
alert (elem. id); // => undefined // 取得 的 是 空白 节点 
elem = my.nextSibling; 
alert (elem.id); // => 'e' 
elem = my.lastChild; 
alert (elem.id); // => 'e' 
var children = my.childNodes; 
alert (children[0] .id); // => undefined // 取得 的 是 空白 节点 
alert (childqren[1] .id); // => 1e' 
alert(enildrenl2l 7a) // => undefined // 取得 的 是 空白 节点 
alert (children[3] .id); // => 'e!' 
// 兄弟 元 素 
elem = my.previousSibling.previousSibling; 
alert (elem.id); // => ‘'b" 
elem = my.nextSibling.nextSibling; 
alert (elem.id); WE 
elem = elem.nextSibling; 
alert (elem.id); a 
// 由 于 在 人 特 或 总 人知， 因此 div#f 的 nextsibling 是 div#g 
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enTRES 
</body> 


在 这 里 需要 注意 的 是 ， 通 过 childNodes 获取 的 对 象 都 是 NodeList 对 象 。 而 NodeList 对 象 是 一 种 Live 

对 象 。 前 面 提 到 过 ，Live 对 象 的 性 能 并 不 大 好， 如果 在 childNodes 可 能 会 很 大 时 ， 最 好 将 其 先 转换 为 
Array 之 后 再 使 用 。 
于 上 面 所 介绍 的 firstChild 等 属性 也 会 包含 空白 节点 ， 因 此 最 终 取 得 的 节点 并 不 一 定 就 是 直 
观 上 所 以 为 的 那个 。 如 果 在 取得 了 节点 之 后 要 修改 节点 ， 则 还 须 判 断 节 点 是 否 为 空白 节点 ,很 不 方便 。 
因此 ， 另 外 还 制定 了 一 些 用 于 获取 不 包含 空白 节点 与 注释 节点 的 元 素 的 API， 它 们 在 一 些 浏览 器 中 已 经 
实现 ( 表 9.8 )。 
























































己 之 ，H 


























表 9.8 一 些 用 于 引用 相关 元 素 的 属性 




















能 够 获取 的 元 素 
children 子 元 素 节 点 列表 
firstElementChild 第 一 个 子 元 素 
lastElementChild 最 后 一 个 子 元 素 
nextElementSibling 下 一 个 元 素 
previousElementSibling 上 一 人 元素 
childElementCount 子 元 素 的 数量 

















除了 children 之 外 ， 其 他 的 几 个 被 称 为 Element Traversal API ( 元 素 遍历 API )。 尽 管 children 不 属于 
Element Traversal API， 不 过 所 有 主流 的 浏览 器 都 对 其 进行 了 实现 ， 所 以 可 以 将 它 作 为 一 种 获取 子 元 素 的 
方法 。 虽 然 Internet Explorer 也 支持 children， 不 过 Internet Explorer 中 的 children 将 会 返回 一 个 包含 空白 
节点 的 NodeList， 对 此 请 加 以 注意 。Internet Explorer 还 真是 一 个 麻烦 的 浏览 

如 果 用 Traversal API 改写 之 前 的 例子 ， 则 能 够 得 到 代码 清单 9.12 这 样 的 代码 。 可 以 看 到 ， 由 于 忽略 
了 空白 节点 ， 现 在 的 代码 比 使 用 firstChild 等 属性 时 要 更 为 直观 。 


有 代码 清单 9.12 用 于 引用 相关 元 素 的 属性 的 具体 使 用 示例 


<body> 
EG ole Me 
<div id="b"></div> 
<li my > 
= en 
<div id="d"></div> 





























| 




















/cl 
<div id="e"></div> 
= 
= /i /i 
Wo 
Nene ol 
var my = document .getElementBylid('my-id'); 
Var elem; 
elem = my.parentNode; 
alert (elem.id); // => 'a' 
WV 括 元 来 
elem = my.firstElementChild; 
alert (elem.id); /是 ec 
elem = my.lastElementChild; 
alert (elem.id); // => 'e' 
var children = my.children; 
alert (children[0] .id); = ee 
alert (children[1] .1Q) ; // => 'e' 
// 兄弟 元 素 
elem = my.previousElementSibling; 
alert (elem.id); /= 
elem = my.nextElementSibling; 
alert (elem.id); VE 
elem = elem.nextElementSibling; 
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alert (elem.id); 
We le 
</body> 


9.3.6 XPath 

















/> 
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尽管 通过 上 述 的 getElementById0 与 childNodes 等 方法 就 能 够 访问 所 有 节点 ， 不 过 这 还 称 不 上 是 构 


成 了 完整 的 节点 指定 方法 。 通 过 XPath 来 指定 节点 是 一 种 更 为 灵活 的 方式 。 























通过 XPath 方式 ， 能 够 很 容易 地 实现 复杂 的 节点 指定 操作 。 例 如 ， 指 定 一 个 id 为 main 的 div 元 素 中 








的 第 三 个 以 content 为 class 值 的 p 元 素 中 的 某 个 a 元素 ， 且 该 元 素 的 href 值 的 起 始 部 分 为 http://example. 


com/ (代码 清单 9.13 )。 


| 代码 清单 9.13 ”XPath 对 象 的 HTML 结构 


=a dma 
<p elass= oomnteneys 





<a class="link" href="http://example.com"/>1lst link</a> 


/eS 
<p essse on 
<prolass= "eontente 


<a href="http://example.com/">2nd link</a> 


2M 
epoelass = oomeeneu> 


<a href="http://foobar.example.com/">3rd link</a> 
<a href="http://example.com/">4th link</a> 


SMa 
<a href="http://example.com/">5th 
</div> 











对 于 代码 清单 9.13 中 的 HTML 代码 ， 以 前 




















link</a> 


看 所 说 的 条 件 应 该 是 会 取得 表示 4th link 的 a 元素。 如 果 


Ua 








上 


要 通过 XPath 来 实现 这 一 操作 ， 则 需要 使 用 代码 清单 9.14 中 的 方式 。 


| 代码 清单 9.14 XPath 的 使 用 示例 


See 
var result = dqocument .evaluate( 


// id 为 main 的 div / 包含 了 值 为 content 的 class 的 p 元 素 中 的 第 三 个 /href 值 的 起 始 部 分 


为 http://example.com/ 的 a 元 素 

Md on ma leontals (oe 
"http://example.com/")]', 

document, 

na, 


lass, "content")] [3]/alstarts-with (@href, 


XPathResult .ORDERED NODE SNAPSHOT TYPE, 


nual 


yp 

alert (result.snapshotLength); /人 
Var elem = result.snapshotItem(0); 
alert (elem.innerHTML); WA 
/enue 
































=> 1 


= el Matas 





通过 这 样 的 方式 使 用 XPath， 就 能 够 灵活 地 指定 并 取得 某 个 特定 的 DOM 元 素 。Document.evaluate() 方法 


将 会 接收 5 个 参数 ， 可 能 会 有 些 不 容易 理解 ， 不 过 在 熟悉 之 后 就 会 发 现 它 也 是 很 简单 的 。 





它 的 第 1 个 参数 是 用 于 求 值 的 XPath 表达 式 的 字符 串 
XPath 表达 式 将 会 在 被 指定 的 这 一 节点 中 进行 求 值 匹配 并 














它 的 第 2 个 参数 用 于 指定 文档 中 的 节点 。 














Ey 


[e] 

















返回 结果 。 如 果 将 参数 指定 为 document， 则 会 搜索 整个 文档 。 如 果 能 够 确定 搜索 的 范围 ， 最 好 在 此 指定 
一 个 恰当 的 值 。 这 样 就 不 会 进行 无 意义 的 搜索 ， 从 而 有 望 提高 执行 性 能 。 
在 第 3 个 参数 中 ， 可 以 指定 用 于 返回 URI 命 名 空间 的 函数 。 这 一 参数 是 用 于 需要 使 用 命名 空间 前 级 





























的 XML 文档 之 中 ,在 HTML 文档 中 不 需要 使 用 。 传 递 null 





























值 即 可 。 
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对 象 ， 







































































至 9 的 数字 。 所 有 的 这 些 都 在 XPathResult 接口 中 被 定义 为 了 常量 。 





表 9.9 总 结 了 该 参数 被 指定 为 不 同 的 值 时 将 会 返回 的 对 象 。 





表 9.9 evaluate 方法 的 第 4 个 参数 的 值 与 其 返回 值 之 间 的 关系 


所 返回 的 对 象 


第 4 个 参数 指定 了 返回 求 值 结果 时 所 要 使 用 的 对 象 类 型 。evaluate() 方法 的 返回 值 为 一 个 XPathResult 
而 XPathResult 对 象 又 含有 多 种 类 型 。 该 参数 正 是 用 于 指定 其 具体 的 类 型 。 能 够 用 于 指定 的 值 为 0 










































































































































































法 时 抛 出 异常 。 而 对 了 
果 的 基础 上 继续 处 理 (代码 清单 9.15 )。 


























| 代码 清单 9.15 ”和 迭代 器 与 快照 的 区 别 


// 获取 迭代 器 

var iterator = document .evaluate ( 
/ce mad 
document, 
nmol 
XPathResult .ORDERED NODE ITERATOR TYPE, 
ma 

hi 


// 在 取得 了 和 迭代 器 之 后 ， 继 续 以 一 定 的 条 件 向 文档 中 增加 新 的 节点 
var newParagraph = document.createElement ('p'); 
document .getElementById('main') .appendChild (newParagraph); 
newParagraph.appendChild(document .createTextNode('This is a new paragraph.')); 
Eryol 

node = iterator.iterateNext () ; // 将 会 抛 出 INVALID STATE ERR 异常 
} catch (e) { 

console.1log (e); 











// 获取 快照 

Var snapshot = document .evaluatel 
Wy la le ee 
document, 
null, 
XPathResult .ORDERED NODE SNAPSHOT TYPE, 
null 

De 


// 在 取得 了 和 迭代 器 之 后 ， 继 续 以 一 定 的 条 件 向 文档 中 增加 新 的 节点 

var anotherPparagraph = document.createEpElement ('p'); 

document .getElementById('main') .appendChild (anotherPparagraph); 
newParagraph.appendChild (document .createTextNode('This is another paragraph.')); 
for (var i = 0; i < snapshot.snapshotLength; i++) { 
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个 包含 了 与 求 值 结果 相符 类 型 的 结果 的 集合 。 如 果 该 结果 是 一 个 节 
ANY_TYPE 0 点 的 集合 ， 则 返回 的 对 象 与 被 指定 为 
UNORDERED_NODE_ITERATOR_TYPE 时 的 相同 
NUMBER_TYPE 1 数值 
STRING_TYPE 2 字符 串 
BOOLEAN_TYPE 3 真 假 值 
UNORDERED_NODE_ITERATOR_TYPE 4 一 个 节点 集合 的 迭代 器 。 不 限定 顺序 
ORDERED_NODE_ITERATOR_TYPE 5 一 个 节点 集合 的 迭代 器 。 顺 序 与 其 在 文档 中 出 现 的 顺序 相 一 致 
UNORDERED_NODE_SNAPSHOT_TYPE 6 一 个 节点 集合 的 快照 。 不 限定 顺序 
ORDERED_NODE_SNAPSHOT_TYPE 2 一 个 节点 集合 的 快照 。 顺 序 与 其 在 文档 中 出 现 的 顺序 相 一 至 
ANY_UNORDERED_NODE TYPE 8 是 匹配 的 节点 中 的 任意 一 个 。 并 不 一 定 是 第 一 个 与 表达 式 匹 
FIRST_ ORDERED NODE _ TYPE 9 在 文档 内 第 一 个 与 表达 式 匹 配 的 节点 
返回 值 为 迭代 器 与 返回 值 为 快照 的 区 别 在 于 ， 它 们 对 在 evaluate0) 方法 被 执行 之 后 文档 中 产生 的 变更 
的 处 理 方式 不 同 。 对 于 迭代 需 来 说 ， 如 果 在 取得 结果 之 后 对 文档 进行 了 修改 ， 则 会 在 执行 iterateNext0 方 
FF 快照 来 说 ， 则 不 会 抛 出 异常 。 不 过 这 时 也 仅仅 是 会 在 执行 evaluate() 方式 所 取得 结 
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console.1og(snapshot .snapshotItem(1I) === anotherPparagraph); 
// 所 有 的 结果 都 将 为 false 

// 也 就 是 说 ，anotherParagraph 并 没有 包含 在 snapshot 中 

// 但 也 不 会 抛 出 异常 





} 

这 个 参数 常常 会 被 指定 为 ORDERED NODE SNAPSHOT TYPE 值 。 

最 后 的 第 5 个 参数 用 于 指定 一 个 已 有 的 XPathResult 对 象 。 如 果 指 定 了 该 参数 ， 则 能 够 重复 使 用 
XPathResult 对 象 。 如 果 没 有 指定 该 参数 ， 则 会 新 生成 一 个 XPathResult 对 象 。 通 常 只 要 将 这 一 参数 指定 
为 null 就 不 会 有 什么 问题 了 。 

在 使 用 XPath 的 过 程 中 需要 注意 的 是 ，Internet Explorer 不 支持 这 一 功能 。 即 使 是 Internet Explorer 9 
也 无 法 使 用 。 不 过 , 已 经 有 了 一 些 用 于 为 Pnternet Explorer 添加 对 XPath 的 支持 的 库 〈 JavaScript-XPath )， 
只 要 使 用 这 些 库 就 能 够 解决 这 一 问题 。 

可 以 从 下 面 的 URL 下载 JavaScript-XPath。 

http://coderepos.org/share/wiki/JavaScript-XPath 





























































































































国 9.3.7 Selector API | 


尽管 通过 XPath 就 能 够 灵活 地 指定 并 取得 所 需 元 素 ， 但 其 使 用 方法 多 少 有 些 复杂 。 而 Selector API 下 
是 一 种 比 XPath 更 为 简单 ， 而 同时 又 保持 了 相当 灵活 性 的 元 素 获取 方式 。 
通过 Selectors API 对 元 素 指定 的 方式 与 其 在 CSS 中 指定 元 素 的 方式 相同 。 所 以 ， 它 可 以 简单 地 实现 
与 getElementById(0) 或 getElementsByTagName() 相同 的 操作 ( 代码 清单 9.16 )。 而 通过 querySelectorAll0 
则 可 以 获取 所 有 符合 条 件 的 元 素 。 此 时 ， 如 果 有 多 个 元 素 同 时 符合 条 件 ，querySelector0) 将 只 会 返回 第 一 
个 与 条 件 相符 的 元 素 。 


| 代码 清单 9.16 ”Selectors API 的 使 用 示例 













































































var a document .querySelector ('#fo0'); 

var b document .getElementById('foo'); 
Eanais le === 0) Wve 

var C = document .querySelectorAll ('div'); 

var d = document .getElementsByTagName ('div'); 
alertlelOl ==e 0 // => true 


此 外 ， 还 可 以 像 代码 清单 9.17 这 样 ， 通 过 Selector API 实现 与 使 用 XPath 时 相同 的 功能 ， 以 取得 和 代 
码 清 单 9.14 相同 的 结果 。 对 于 熟悉 CSS 选择 器 的 人 来 说 ， 这 种 方式 应 该 会 比 XPath 具有 更 好 的 可 读 性 。 


有 代码 清单 9.17 Selector API 的 使 用 示例 2 








SEE 
var elem = document .querySelector( 
'div#main > p.content:nth-of-type(4) > a[lhref^="http://example.com/"]'); 
alert (elem. innerHTML); 故人 三 dad ata 
ET 
这 里 有 一 个 需要 注意 的 要 点 。qduerySelectorAll0 方法 所 返回 的 对 象 不 同 于 通过 getElementsByTagNameO) 
或 childNodes 等 方式 所 取得 的 NodeList 对 象 。 通 过 querySelectorAll0 所 取得 的 是 一 个 StaticNodeList 
对 象 。 
NodeList 与 StaticNodeList 的 区 别 在 于 ， 更 改 对 象 之 后 是 否 会 将 该 更 改 反映 于 HIML 文档 之 中 。 
如 果 对 NodeList 对 象 进行 了 更 改 ， 则 在 HTML 文档 中 也 会 体现 出 相应 的 变化 。 然 而 ， 如 果 更 改 了 
StaticNodeList 对 象 ， 在 HTML 文档 中 并 不 会 反映 出 这 一 更 改 。 如 果 没 有 意识 到 这 一 区 别 的 话 ， 会 发 现 对 
StaticNodeList 进行 操作 的 结果 与 对 NodeList 进行 操作 的 结果 是 不 同 的 ， 程 序 并 没有 按照 期 望 的 方式 运行 。 
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9.4 节点 的 创建 与 新 增 


可 以 通过 Document.createElement() 方法 或 Document.createTextNode() 方法 来 创建 节点 。 此 外 还 有 
种 不 太 常 用 的 方法 ， 即 还 可 以 通过 Document.createComment() 方法 来 创建 一 个 注释 。 

如 果 仅 仅 是 创建 了 一 个 节点 ， 对 于 HTML 文档 来 说 并 不 会 发 生 什 么 变化 。 只 有 将 创建 的 节点 加 入 
DOM 树 之 后 该 节点 才 会 在 浏览 器 中 显示 。 

如 果 要 将 节点 新 增 为 某 一 节点 的 最 后 一 个 子 元 素 ， 则 可 以 使 用 Node.appendChild0 方法 。 而 如 果 要 
将 节点 插入 至 某 一 元 素 所 在 的 位 置 ， 则 需要 使 用 Node.insertBefore() 方法 ( 代码 清单 9.18 )。 


上 代码 清单 9.18 节点 的 创建 与 新 增 



















































































var elem = document .createElement ('div'); Wl 个 
var text = document .createTextNode('This is a new div element.'); // 创建 一 个 文本 节点 
document .body.appendChild (elem); // 将 所 创建 的 元 素 添 加 至 body 之 下 
elem.appendChile (text); // 将 文本 节点 添 加 至 所 旬 建 的 aiv 元 素 中 
var Comment = Qocument .createComment ('this is comment'); // 创建 一 注释 市 
document .body.insertBefore (comment, elem); Wd ee 
-Eo Dd 
9.5 | 节点 的 内 容 更 改 
如 果 改 写 所 取得 节点 的 属性 ， 则 这 一 改动 也 会 在 HIML 文档 中 得 到 体现 。 另 外 还 通过 Node. 











replaceChild() 方法 蔡 换 节点 〈 代 码 清单 9.19 )。 

有 代码 清单 9.19 节点 的 替换 
Var newNode = document .createElement ('div'); 
var oldNode = document .getElementById('foo'); 


var parentNode = oldNode.parentNode; 
parentNode.replaceChild (newNode, oldNode); 


mn 节点 的 删除 


可 以 通过 Node.removeChild0 方法 来 删除 节点 (代码 清单 9.20 )。 
‖ 代码 清单 9.20 节点 的 删除 


var elem = document .getElementById('fo0o'); 
elem.parentNode.removeChild (elem); 


9.7 innerHTML/textContent 


9.7.1 innerHTML | 


0 绍 的 这 些 方法 ,我们 已 经 能 够 自由 修改 HTML 文档 个 过 ， 需要 修改 大 量 元 素 时 ， 如 
果 es 或 appendChild()， 则 会 显得 过 于 宛 长 。 其 实 还 有 一 种 更 为 简单 的 书写 方式 ， 
es HTMLElement 的 innerHTML 属性 。 

在 对 innerHTML 属性 赋值 之 后 ， 浏 览 絮 将 会 分 析 其 内 容 ， 并 将 分 析 结 果 设 为 该 元 素 的 子 元 素 ( 代码 
清单 9.21 )。 
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不 过 ，innerHTML 属性 并 不 是 一 种 在 DOM 标准 中 被 定义 的 功能 ， 而 是 一 种 在 HTMLS 中 被 定义 的 属性 。 
但 因为 Internet Explorer 在 很 早 之 前 就 实现 了 这 一 功能 ， 所 以 在 大 部 分 的 浏览 器 中 都 能 使 用 innerHTML。 


| 代码 清单 9.21 innerHTML 的 使 用 示例 














Var elem = document .getElementByIid('foo'); 
elem.innerHTML = '<div>This is a new div element.</div>'; 


图 9.7.2 textContent | 


innerHTML 属性 可 以 以 HTML 字符 串 的 形式 被 引用 ， 而 textContent 属性 则 可 以 取得 包含 子 元 素 在 内 
的 纯 文本 部 分 (代码 清单 9.22 )。 因 此 ， 如 果 设 定 textContent 属性 ， 就 能 够 将 子 元 素 全 部 删除 ， 并 将 其 替 
换 为 一 个 文本 节点 。 

Internet Explorer 有 一 个 innerText 属性 可 以 实现 与 其 相同 的 功能 。textContent 属性 是 一 种 在 DOM 
Level 3 Core 中 被 定义 的 属性 。 


用 代码 清单 9 22 textContent 的 使 用 示例 

































































Var elem = document .getElementByIid('foo'); 
elem.textContent = '<div>Is this a new div element?</div>'; 


// EPE 





| 9.8 | DOM 操作 的 性 能 


在 客户 端 JavaScript 中 ，DOM 操作 是 不 可 或 缺 的 。 通 过 DOM 操作 可 以 实现 内 容 的 改写 ， 而 如 果 在 
显示 上 发 生 了 变化 ,浏览 器 自然 要 重新 绘制 画面 。 而 画面 的 重新 绘制 这 一 步骤 是 需要 花费 开销 的 ， 所 以 
应 当 尽 可 能 避免 重新 绘制 画面 。 

下 面 对 向 画面 中 新 增 10 个 div 元 素 的 情况 进行 讨论 。 如 果 只 是 简单 地 像 代码 清单 9.23 这 样 书写 的 
话 ， 则 会 执行 10 次 画面 刷新 。 
有 代码 清单 9.23 性 能 较 差 的 书写 方式 

var parent document .getElementById('parent'); 
for (var Os Te LO +) 
var child = document .createElement ('div'); 


// 向 父 元 素 中 添加 子 元 素 。 在 添加 时 将 会 重新 绘制 画 
parent .appendChild (child); 
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} 








与 之 相对 ， 如 果 按 照 代码 清单 924 中 这 样 使 用 DocumentFragment， 则 可 以 将 画面 的 重 绘 次 数 降低 至 1 次。 
| 代码 清单 9.24 ”使 用 DocumentFragment 























var fragment = document.createDocumentF 
fOr (Var 0 T1000 
var child = document .createElement ('div'); 
// 向 DocumentFragment 添加 子 元 素 
fragment .appendChild(child); 


ragment () ; 


} 


// 向 父 元 素 中 添加 DocumentFragment 

// 虽然 添加 的 是 DocumentFragment， 但 实际 上 添加 的 仅仅 是 DocumentFragment 的 子 元 素 

document .getElementById('parent') .appendChild (fragment); 

像 这 样 先 修改 DocumentFragment， 最 后 再 对 实际 的 document 对 象 进行 操作 的 话 ， 就 可 以 避免 不 必 
要 的 画面 重 绘 。 
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本 章 讲解 事件 的 处 理 ， 这 是 客户 端 
实现 各 种 各 样 的 功能 ， 必 须 恰 当地 处 理 不 同 的 事件 。 


10.1 | 事件 驱动 程序 设计 


在 JavaScript 中 ， 最 为 习 

















处 理 方式 。 





在 注册 了 事件 的 处 理 方式 之 后 ， 
方式 被 称 作 事件 处 理 程序 、 


对 于 Web 应 用 来 说 ， 
键盘 上 某 个 键 ， 等 等 。 此 





所 以 说 ，JavaScript 程序 设计 的 基 


册 相 应 的 事件 处 理 程序 。 





DOM Level 2 中 定义 了 标准 
Internet Explorer 8 以 及 更 早 版 本 中 ， 采 月 
事件 模型 没有 太 大 的 差别 ， 但 API 是 完全 不 同 的 ， 应 当 加 以 注意 。 
说 明 。 对 于 Internet Explorer 相关 的 说 明 ， 











娃 





有 下 面 这 些 代表 性 的 事件 : 点 击 某 个 元 素 、 将 鼠标 移动 至 某 个 元 素 上 方 、 按 下 
读 取 页 面 或 跳 转 至 其 他 页 再 
作 ， 浏 览 器 会 触发 相应 的 事件 。 之 后 ， 执 行事 件 处 理 程序 ， 处 理 被 触发 的 事件 。 

本 内 容 之 一 就 是 获取 需要 对 事件 进行 捕捉 的 元 素 ， 


外 ， 





JavaScript 中 最 为 重要 的 概念 之 一 。 为 了 使 用 JavaScript 




















要 的 一 件 事 就 是 对 事件 进行 处 理 。 与 通常 的 GUI 局 
程序 也 是 通过 事件 驱动 程序 设计 的 方式 来 实现 其 功能 的 。 em 

















有 件 句 柄 或 事件 侦 听 器 。 

















应 用 程序 


浏览 器 就 会 在 该 事件 发 生 时 执行 所 注册 的 处 理 方式 。 














相同 ，Web 应 



























































这 里 会 以 标准 的 习 
请 参见 与 跨 浏览 器 支持 相关 的 内 容 。 




















j 等 行为 也 会 引发 事件 。 根 据 这些 不 同 的 用 户 操 








所 登录 的 处 理 





局 


并 针对 该 元 素 注 


的 事件 模型 。 大 部 分 现代 浏览 器 都 是 根据 这 一 标准 实现 的 。 但 是 ,在 
日 了 自 定义 的 事件 模型 实现 方式 。 从 功能 上 来 说 ， 


这 确实 和 标准 





有 件 模 型 为 基础 进行 


10.2 | 事件 处 理 程序 / 事件 侦 听 器 的 设 定 


对 事件 的 处 理 方式 被 称 为 事件 处 理 程序 或 事件 侦 听 器 ， 但 这 两 者 之 间 其 实 是 有 区 别 的 。 它 们 的 设 定 








方法 并 不 相同 ， 因 此 ， 两 者 文 持 的 处 理 元 素数 量 也 不 同 。 对 于 1 个 元 素 或 事件 ， 


程序 。 而 与 之 相对 的 ， 可 以 为 其 同时 设 定 多 














下 面 是 一 些 对 











有 件 处 理 进 行 设 定 的 方式 。 








多 个 事件 侦 听 器 。 


@ 指定 为 HTML 元 素 的 属性 ( 事件 处 理 程序 ) 
@ 指定 为 DOM 元 素 的 属性 ( 事件 处 理 程序 ) 
@ 通过 EventTarget.addEventListener() 进行 值 定 ( 事件 侦 听 器 ) 


接 下 来 ， 将 会 对 各 种 方式 进行 详细 说 明 。 
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只 能 


改定 1 个 事件 处 理 





国 10.2.1 指定 为 HTML 元 素 的 属性 
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将 事件 处 理 程序 指定 为 HTML 元 素 的 属性 是 一 种 最 为 简单 的 设 定 事件 处 理 程序 的 方式 。 在 下 面 的 例 








子 中 ,将 会 在 发 生 按钮 点 击 事件 时 显示 含有 bar 和 baz 消息 的 提示 对 话 放 





[HI 


品 





nEOELEOSUREYPEELEUEESNUETSTUE 三 SS on ualerte (ear ean ea 


在 这 个 例子 中 ， 通 过 字符 串 对 onclick 事件 处 理 程序 将 要 执行 的 JavaScript 代码 进行 了 设 定 。 如 果 代 











码 包 含 多 行 ， 则 可 以 通过 分 号 分 隔 。 当 然 ， 事 先 另 外 定义 一 个 函数 之 后 
且 能 够 确保 事件 处 理 程序 会 在 载 人 时 被 设 定 。 而 如 果 














这 种 方式 的 优点 在 于 ， 设 定 步骤 非常 简单 ， 





使 用 之 后 所 介绍 的 一 些 方法 则 可 能 会 产生 一 些 问 题 。 即 元 素 在 被 载 人 
注册 ， 这 时 用 户 执行 任何 本 应 触发 事件 的 操作 ， 也 不 会 有 任何 效果 。 与 之 相对 地 ， 将 事件 处 理 程序 指定 
为 HIML 元 素 的 属性 的 话 ， 就 能 够 确保 它 在 载 人 的 同时 被 设 定 。 









































执行 该 函数 的 方式 也 不 会 有 问题 。 


























时 ， 其 事件 处 理 程序 可 能 还 没有 

















在 书写 上 也 有 一 些 需 要 注意 的 地 方 ， 就 是 这 里 的 onclick 全 都 是 以 小 写字 母 书 写 的 。HTML 不 会 区 分 











大 小 写字 母 ， 所 以 即使 在 这 里 使 














考虑 到 这 点 ， 最 好 还 是 使 用 全 部 小 写 的 onclick， 这 样 将 有 助 














表 10.1 是 事件 处 理 程序 的 一 览 表 。 








] 了 onClick 也 不 会 有 什么 差别 。 但 是 ，XHTML 则 会 区 分 大 小 写字 母 。 
F 提 高 代码 的 兼容 性 。 






















































































































































































表 10.1 事件 处 理 程序 
事件 处 理 程 序 名 触发 的 时 机 
onclick 鼠标 点 击 操作 
ondblclick 鼠标 双击 操作 
onmousedown 按 下 了 鼠标 按键 
onmouseup 放 开 了 鼠标 按键 
onmousemove 鼠标 指针 在 元 素 上 方 移 奴 
onmouseout 鼠标 指针 从 元 素 上 方 离开 
onmouseover 鼠标 指针 移动 至 了 元 素 上 方 
onkeydown 按 下 了 键盘 按键 
onkeypress 按 过 了 键盘 按键 
onkeyup 放 开 了 键盘 按键 
onchange 更 改 了 input 元 素 的 内 容 
onblur input 元 素 失去 了 焦点 
onfocus input 元 素 获 得 了 焦点 
onselect 文本 被 选取 
onsubmit 安 下 了 表单 的 提交 按钮 
onreset 安 下 了 表单 的 重 置 按钮 
onload 载 入 完成 
onunload 文档 的 载 入 被 撤销 ( 例如 页 面 跳 转 等 情况 时 ) 
onabort 到 像 的 读 取 被 中 断 
onerror 图 像 读 取 过 程 中 发 生 错 误 
onresize 窗口 尺寸 发 生 改变 

如 果 事 件 处 理 程序 返回 了 一 个 false 值 ， 则 会 取消 该 事件 的 默认 行为 。 例 如 ， 当 onsubmit 事件 处 理 程 


序 返回 了 一 个 false 时 ， 表 单 的 内 容 将 不 会 被 发 送 。 这 在 使 用 
] ， 可 以 在 发 现 内 容 有 误 时 返回 false 以 

















有 


— 
































onsubmit 事件 处 理 程序 验证 表单 内 容 时 会 很 





取消 表单 数据 的 发 送 。 另 外 ， 如 果 像 代码 清单 10.1 





| 代码 清单 10.1 ”在 事件 处 理 程序 中 返回 false 值 


<script> 
function stop (event) { 


样 ， 在 <a> 标签 的 onclick 事件 处 理 程序 中 返回 false， 则 会 取消 页 面 的 跳 转 。 





alert('Stop page transfer'); 


return false; 
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FP 的 例子 这 
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el 


<a id="foo" href="http://example.com'" onclick="return stop();">example.com</a> 
国 10.2.2 指定 为 DOM 元 素 的 属性 | 


























如 果 一 个 页 面 分 别 使 用 了 HTML 文件 和 JavaScript 文件 ， 则 应 该 尽 可 能 少 地 在 HTML 文件 中 使 用 
JavaScript 代码 ， 以 提高 可 维护 性 。 因 此 ， 最 好 将 事件 处 理 程序 的 设 定 全 都 写 在 JavaScript 内 。 
事件 处 理 程序 可 以 被 指定 为 节点 的 属性 (代码 清单 10.2 )。 

有 代码 清单 10.2 ”将 事件 处 理 程序 指定 为 属 | 
var btn = document .getElementById('foo'); 


function sayFoo() { 
ae 人 Eee 





























ERICmEITETCR ee oavEoo 


需要 注意 的 是 ， 这 里 被 指定 为 事件 处 理 程序 的 正 是 一 个 函数 。 像 下 面 这 样 ， 以 函数 执行 后 的 返回 值 
或 用 于 HTML 标签 的 字符 串 的 形式 来 设 定 的 话 ， 将 会 发 生 错 误 。 


| 代码 清单 10.3 ”事件 处 理 程序 的 设 定 















































weenieonelniek Soaveool // 这 种 方式 指定 的 是 函数 执行 后 的 返回 值 ， 是 错误 的 
btn.onclick = "sayFoo()"; // 以 字符 串 的 形式 指定 该 函数 也 是 无 效 的 
bth.coclick = sayFoo; // 将 函数 指定 为 了 事件 处 理 程序 ， 而 能 够 正常 运行 
与 通过 HTML 标签 的 属性 设 定时 不 同 ， 这 里 必须 全 部 使 用 小 写字 母 书写 。 






























































而 在 设 定 为 了 属性 之 后 ，HTML 标签 属性 中 的 内 容 将 会 被 覆 写 。 因 此 ， 如 果 和 希望 通过 JavaScript 代 
码 在 HTML 标签 属性 所 指定 的 内 容 之 后 再 追加 新 的 处 理 操作 ， 仅 采用 这 种 指定 DOM 元 素 的 方法 是 很 难 实现 
的 。 在 DOM Level2 Events 中 定义 的 一 种 方法 可 以 简单 地 解决 这 一 问题 ， 这 种 方法 将 在 之 后 的 小 节 中 说 明 。 

















[中 10.2.3 通过 EventTarget.addEventListener() 进行 指定 | 


图 注册 事件 侦 听 器 
虽然 之 前 所 介绍 的 各 种 方式 也 能 够 对 事件 注册 各 种 各 样 的 处 理 ， 但 它们 都 有 一 个 缺点 ， 那 就 是 对 于 
某 一 个 元 素 的 某 一 个 事件 ， 只 能 够 指定 1 种 处 理 操作 。 

如 果 只 能 够 指定 1 种 处 理 操作 的 话 ， 就 很 难处 理 复 杂 的 行为 。 为 了 弥补 这 一 缺点 ， 在 DOM Level 
2 中 定义 了 EventTarget.addEventListener() 方法 (代码 清单 10.4 )。 不 过 正如 前 面 所 说 ， 该 方法 无 法 在 
Internet Explorer 8 以 及 更 早 版 本 的 浏览 器 中 使 用 。 为 此 可 以 在 Internet Explorer 中 换 用 attachEvent() 方法 。 
关于 这 方面 的 内 容 ， 请 参见 8.5 节 。 


| 代码 清单 10.4 ”注册 事件 侦 听 器 


var btn = document .getElementById('foo'); 

btn.addEventListener('click', function (e) { 
el (Eo) 

}, false); 


在 注册 事件 侦 听 器 时 ， 还 可 以 指定 第 3 个 参数 ， 用 以 指定 从 捕获 阶段 还 是 从 事件 冒 泡 阶段 开始 执行 。 
这 两 种 阶段 将 在 之 后 说 明 。 在 DOM Level 2 中 ， 这 一 参数 是 必须 的 。 而 在 DOM Level 3 中 ， 如 果 省 略 了 
该 参数 ， 则 会 默认 从 事件 冒 泡 阶段 开始 执行 。 之 前 介绍 的 指定 为 HTML 元 素 属 性 的 方式 ， 以 及 指定 为 
DOM 元 素 属性 的 方式 ， 都 会 在 事件 冒 泡 阶段 执行 事件 处 理 程序 。 如 果 和 希望 在 捕获 阶段 执行 事件 处 理 程序 
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的 话 ， 则 只 能 使 























法 中 ， 是 没有 与 之 相对 应 的 参数 的 。 在 Internet Explorer 中 ， 
园 事件 侦 听 器 的 执行 顺序 


了 多 个 寻 
点 进行 定义 。 


同一 个 事件 侦 听 器 
此 外 ， 不 能 同时 对 习 
的 注册 将 会 被 忽略 。 


可 以 通过 addEventListener0 方法 对 某 个 特 履 
和 件 侦 昕 器 ， 则 会 产生 事 
在 DOM Level 3 中 则 是 将 执行 顺 
也 都 是 以 注册 的 顺序 对 事件 侦 听 器 执行 的 。 即 
执行， 而 不 应 该 将 它们 置 
E 伯 目标 、 事 件 类 
在 这 种 情况 下 ， 事 件 侦 听 器 的 尘 



























































| 代码 清单 10.5 ”对 同一 个 事件 侦 听 器 进行 注册 


var 


) 

Da 
Den 
bt 





件 侦 听 咒 之 间 的 执行 | 
序 规定 为 与 注册 





于 多 个 不 同 的 3 





btn = document .getElementById('foo'); 
function sayHello() { 


alert ('Hello'); 


addEventListener('! 
addEventListener(! 
addEventListener(! 











Vi 





于 执行 阶段 不 同 ， 则 六 











eile 
Eee 
aas 


元 素 的 特定 习 





sayHello, false); 
sayHello, false); 
sayHello, true); 


会 被 作为 另 一 个 事件 侦 听 器 被 注册 


| 代码 清单 10.6 事件 侦 听 器 的 执行 顺序 


Var 


} 


btn = document .getElementById('fo0o'); 
function sayFoo() { 


alert ('foo'); 


function sayBar() { 


} 


alert ('bar')}s 


function sayBaz() { 


) 

RE 
Dem 
Dene 
DER 


WWX 在 点 击 按钮 时 ， 


alert('baz'); 


addEventListener 
addEventListener 
addEventListener 
addEventListener 


"lk 
We eke 
ued 
veliekn. 


sayFoo, 
sayBar, 
sayBaz, 
sayFoo, 


false); 
false); 


false 
false 


// 在 Firefox、Google Chrome 以 及 safari 中 ， 
// 在 Opera 中 则 将 会 以 bar、baz、 


sayFoo, 


园 事件 侦 听 器 对 象 


指 
































定 为 弹 


和 件 侦 昕 器 ( 代码 


false) 将 会 改变 





通常 ， 只 需要 使 用 函数 就 能 够 指 
青 单 10.7 )。 





应 该 会 以 £00o、bar、baz 的 顺 i 





事件 设 定 多 个 不 同 的 3 











第 10 事件 








I 























// 根据 规则 ， 这 次 注册 将 被 忽略 





会 以 预想 的 情况 执行 




















| 代码 清单 10.7 ”将 对 象 注册 为 事件 侦 听 器 


var 
Var 


Den 

















btn = document .getElementById('foo'); 


eventListener = { 


message: 'This is an event listener object.', 


handleEvent: function 


alert (this.message) ; 


addqEventListenez ( 


re] 


(e) { 


eventListener, 


foo a 这 是 由 于 第 
事件 侦 听 器 的 注册 顺序 
定 事件 俩 听 器 。 一 些 浏览 


195 @ 


] EventTarget.addEventListener() 方法 了 。 而 在 Internet Explorer 所 使 用 的 attachEvent( 方 
事件 侦 听 器 总 是 会 在 事件 冒 泡 阶段 被 执行 。 


和 件 侦 听 右 。 如 果 注 册 
顺序 的 问题 。 然 而 在 DOM Level 2 中 并 没有 对 这 一 
顺序 相同 。 事 实 上 ， 目 前 绝 大 部 
使 如 此 ， 对 于 和 执行 顺序 有 关 的 处 理 ， 还 是 应 该 把 它们 放 在 
帮 件 侦 听 器 之 中 。 
型 及 执行 阶段 都 相同 的 对 象 注册 多 个 相同 的 事件 侦 听 顺 。 之 后 
E 册 顺序 不 会 发 生变 化 ， 所 以 其 执行 顺序 也 不 会 改变 。 





分 的 浏览 


// 对 相同 的 事件 侦 听 器 进行 注册 将 被 忽略 


en entniistenear (el 





器 还 可 以 将 含有 handleEvent0) 方法 的 对 象 


false); 
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// 在 点 击 按键 时 将 会 显示 一 个 含有 'This is an event listener object.' 消息 的 对 话 框 





原本 在 DOM Level 2 Events 中 ，EventListener 接 





口 的 定义 仅仅 是 一 种 含有 handleEvent0 方法 的 一 种 


接口 。 对 于 Java 这 类 的 函数 不 是 第 一 类 对 的 语言 来 说 ， 这 种 定义 是 有 效 的 。 然 而 ， 在 DOM Level 2 Events 
的 附录 中 对 ECMAScript Language Binding 进行 定义 时 ， 又 规定 了 EventListener 对 象 只 是 一 个 函数 。 

此 ，JavaScript 是 可 以 向 addEventListener() 方 法 传递 函数 的 。DOM Level 3 会 对 EventListener 
究竟 是 一 个 函数 还 是 一 个 对 象 进 行 表 述 ， 不 过 目前 还 没有 定论 。 所 以 ， 可 以 认为 在 JavaScript 中 向 








addEventListener() 方法 传递 对 象 ， 是 一 种 与 DOM 的 定义 相 

















功能 进行 了 实现 ， 所 以 如 果 非 要 这 样 使 用 也 不 会 有 什么 问题 。 








还 可 以 将 事件 对 象 作 为 参数 传递 给 一 个 事件 侦 听 器 。 之 后 将 对 该 
为 了 便于 今后 的 说 明 ， 先 在 此 对 两 个 词 进行 定义 。 第 一 个 词 是 事件 


























素 ， 可 以 通过 事件 对 象 的 target 属性 对 其 引用 。 另 

















元 素 ， 可 以 通过 事件 对 象 的 currentTarget 属性 对 其 引用 。 























故 10.2.4， 事件 处 理 程序 /事件 侦 听 器 内 的 this 引用 
在 事件 处 理 程序 内 的 this 所 引用 的 对 象 即 是 设 定 了 该 





码 ， 确 实 是 没有 什么 问题 的 。 





人 


个 词 是 侦 听 器 

















背 的 做 法 。 但 是 现在 主要 的 浏览 器 都 对 这 一 





了 件 对 象 说 明 。 





目标 。 这 是 触发 了 某 个 事件 的 元 








标 。 这 是 注册 了 某 个 事件 侦 听 器 的 











F 处 理 程序 的 元 素 。 如 果 是 像 下 面 这 样 的 代 


document .getElementById('foo') .onclick = function () { /* this 是 #foo 元素 */ }; 


然而 ， 下 面 这 种 情况 则 会 有 些 不 同 。lib 可 能 会 被 认为 是 this 所 3 引 } 


是 设 定 了 事件 处 理 程序 的 元 素 。 


Var Listener = function () {}; 





lib.handleClick = function (event) { /* this 引用 的 是 1ib? 
document .getElementById('foo') .onclick = lib.handleClick; 
// => 在 lib.handleclick 中 ，this 引用 的 不 是 1ib 而 是 #foo 元 素 














如 果 希 望 在 lib.handleClick 内 通过 this 引 








j lib， 可 











以 像 下 


document .getElementById('foo') .onclick = function 


lib.handleClick (event); 





// => 在 1ib.handleclick 中 的 this】 


) 





将 会 引用 1ib 


心 。 关 于 JavaScript 中 this 引用 的 替换 方法 ， 请 参见 6.8.2 节 。 


| 103 事件 的 触发 














这 样 





(event) 




















的 对 象 ， 但 事实 上 ，this 引用 的 











荆 


Se 


， 先 包装 一 个 匿名 函数 之 后 再 设 定 。 


{ 











对 于 事件 侦 听 器 来 说 ， 上 面 的 情况 同样 成 立 。 在 JavaScript 中 ， 我 们 必须 对 this 的 使 用 方式 十 分 小 



































mousemove 事件 。 在 鼠标 指针 移动 的 过 程 中 ， 











这 一 事 伯 





事件 的 发 生 主 要 是 由 用 户 操作 引起 的 。 在 用 户 浏览 网 页 的 过 程 中 ， 发 生 最 为 频繁 的 事件 是 
将 会 持续 发 生 。 








因此 ， 如 果 设 定 了 mousemove 事 





件 的 处 理 ， 则 有 可 能 会 导致 鼠标 移动 速度 变 慢 。 在 对 mousemove 事件 设 定 事件 处 理 程序 或 事件 侦 听 器 


时 ， 请 对 这 一 点 多 加 注意 。 


| 10.4 | 事件 的 传播 








在 浏览 器 中 显示 HTML 文档 时 ，HTML 的 元 素 将 会 鞭 套 显示 。 例 如 ， 在 下 面 的 例子 中 ，<div> 元 素 
中 还 有 一 个 <button> 元 素 。 如 果 点 击 了 sample 按钮 ， 则 会 以 该 按钮 作为 事件 目标 触发 一 次 点 击 事件 。 
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<html> 
<body> 
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Gl ET 
<button id="bar">sample</button> 


</div> 
</body> 
</html> 











这 时 ,事件 的 处 理 将 会 分 别 经 过 捕获 阶段 、 目 标 阶 段 、 事 件 冒 泡 阶段 这 3 个 阶段 (图 10.1 )。 








| 10.1 事件 流程 














window 






中 捕获 阶段 





document 








泡 阶段 





html 











body 








div 








button 

















C@) 目 标 阶 段 





















































国 10.4.1 捕获 阶段 | 


在 捕获 阶段 中 ， 事 件 将 会 从 Window 对 象 开 始 向 下 遍历 DOM 树 来 传播 。 
如 果 注 册 了 事件 侦 听 器 ， 则 会 在 捕获 阶段 执行 相应 的 处 理 。 


国 10.4.2 目标 阶段 | 











在 这 一 阶段 中 ， 被 事 从 
































F 目标 注册 的 事件 侦 听 融 将 会 被 执行 。 如 果 一 个 事件 处 理 程序 被 指定 为 了 

















HTML 的 标签 属性 ， 或 被 指定 为 了 对 象 的 属性 ， 则 会 在 这 一 阶段 中 被 执行 。 


国 10.4.3 事件 冒 泡 阶段 l 








ry 


在 这 一 阶段 中 ， 








才 间 的 传播 方式 为 从 事件 目标 开始 向 上 遍历 DOM 树 ， 直 至 Window 对 象 结束 。 在 























该 树 的 节点 中 注册 的 事件 侦 听 器 将 会 在 这 时 被 执行 。 

不 过 ， 也 有 一 些 事件 不 会 经 过 冒 泡 阶 段 。 比 如 ，click 事件 为 了 确定 需要 涉及 哪些 元 素 而 有 必要 在 传 
播 事 件 的 过 程 中 遍历 DOM 树 ， 而 focus 事件 则 是 一 种 只 需 处 理 当 前 元 素 的 事件 。 这 种 情况 下 对 focus 事 
件 进 行 传播 是 没有 什么 意义 的 ， 所 以 focus 事件 不 会 经 过 冒 泡 阶段 。 











国 10.4.4 取消 
图 取消 传播 

















还 可 以 取消 事件 的 传播 。 通 过 在 事件 侦 听 器 内 执行 Event.stopPropagation() 方法 就 能 取消 传播 。 不 过 
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stopPropagation() 方法 只 能 取消 执行 在 之 后 的 侦 听 器 目标 中 注册 的 事件 侦 听 器 ， 而 在 当前 的 侦 听 央 
设 定 的 其 他 事件 侦 听 器 仍然 会 被 执行 。 

















目标 中 





如 果 要 中 止 其 他 的 事件 侦 听 咒 的 执行 ， 则 需要 使 用 在 DOM Level 3 中 引入 的 stopImmediatePropagation() 方 











法 。 与 stopPropagation() 方法 不 同 ， 当 前 侦 听 器 目标 中 设 定 的 其 他 事件 侦 听 器 的 执行 也 会 被 中 止 。 














由 于 在 


DOM Level 2 中 还 没有 对 事件 侦 听 器 的 执行 顺序 进行 规定 ， 因 此 也 就 没有 这 种 能 够 中 止 其 他 事件 侦 听 咒 


的 执行 的 方法 。 在 DOM Level 3 中 已 经 规定 了 事件 侦 听 器 的 执行 顺序 就 是 其 注册 的 顺序 ， 所 以 这 
就 变 得 有 意义 了 代码 清单 10.8 )。 


| 代码 清单 10.8 stopPropagation() 与 stoplImmediatePropagation() 的 区 别 





Var btn = document .getElementById('foo'); 
function sayFoo(event) { 
alert ('foo"); 
event .stopPropagation(); 
} 
function sayBar (event) { 
alenmt ll Ba 了 
event .stopImmediatePropagation(); 


function sayBaz(event) { 
alert (baz'); 


btn.addEventListener('click', sayFoo, false); 
btn.addEventListener('click', sayBar, false); 
btn.addEventListener('click', sayBaz, false); 


// 在 点 击 按键 之 后 ， 将 会 显示 foo 与 bar 的 对 话 框 ，baz 的 对 话 框 不 会 被 显示 


ee 
此 外 ， 还 能 够 通过 Event.preventDefault( 方法 来 取消 浏览 器 中 默认 实现 的 处 理 操作 。 





























一 方法 


例如 ， 下 ， 点 击 了 <a> 元 素 之 后 ， 将 会 跳 转 至 链接 页 面 。 而 如 果 在 这 时 执行 了 Event. 
preventDefault0 方法 ， 则 不 会 发 生 这 一 行为 。 rer 方法 的 作用 等 同 于 让 一 个 被 指定 为 了 


























HTML 标签 属性 或 DOM 属性 的 事件 处 理 程序 返回 了 一 个 false 值 (代码 清单 10.9 )。 
| 代码 清单 10.9 ”preventDefault() 方法 的 使 用 示例 

















<a id="foo" href="http://example.com">example.com</a> 
SCE 
Var link = document .getElementById('foo'); 
function sayFoo (event) { 
alert( Too 
event .preventDefault ()，; 


} 


link.addEventListener('click', sayFoo, false 
// 由 于 使 用 了 preventDefault () ， 默 认 的 行为 将 被 取 ; 站 不 会 发 生 页 面 跳 转 


/es 




































































IF 























也 有 一 些 事件 无 法 通过 在 事件 中 使 用 preventDefault() 方法 来 中 止 。blur 事件 就 是 其 中 之 一 ， 它 
0 将 被 触发 的 事件 
stopPropagation() 方法 与 preventDefault( 方法 不 仅 能 够 被 用 于 事件 冒 泡 阶段 ， 在 其 他 阶段 中 也 能 够 使 
用 这 些 方法 。 
| 10.5 | 事件 所 具有 的 元 素 
可 以 将 在 事件 侦 听 器 或 事件 处 理 程序 中 发 生 的 事件 作为 参数 再 次 传 给 这 一 事件 侦 听 器 或 事件 处 理 程 








二 


事件 的 类 型 或 发 生 事件 的 节点 来 进行 分 支 处 理 。 





丰 件 侦 听 器 中 可 以 根据 发 生生 
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一 个 事件 对 象 是 一 种 实现 了 Event 接口 的 对 象 。 在 Event 接口 中 定义 了 多 种 属性 ( 表 10.2 ) 与 方法 
( 表 10.3 )。 


表 10.2 ”Event 接口 的 属性 一 览 
















































































































































































属性 说 明 

type 事件 属性 的 名 称 。 例 如 在 设 定 事件 侦 听 器 时 所 用 的 click 等 名 称 

target 触发 了 事件 的 元 素 的 一 个 引用 。 此 即 在 本 章 中 所 说 的 事件 目标 
注册 了 现在 正在 执行 处 理 的 事件 侦 听 器 的 元 素 。 尽 管 与 target 属性 有 些 相似 ， 但 两 者 是 不 同 的 。 

currentTarget 在 捕获 阶段 与 事件 冒 泡 阶段 中 执行 的 事件 侦 听 器 内 ，currentTarget 与 target 指向 的 是 不 同 的 节 
点 。 此 即 本 章 中 所 说 的 侦 听 器 目标 

eventPhase 标识 处 于 事件 传播 的 哪 一 个 阶段 

timeStamp 事件 的 发 生 时 间 

bubbles 如 果 处 于 事件 冒 泡 阶段 则 返回 true， 否 则 返回 false 

cancelable 如 果 事件 能 够 执行 preventDefault() 方法 则 返回 true， 否 则 返回 false 























































































































stopPropagation() 中 止 事件 传播 的 方法 
preventDefault() 中 止 默认 行为 的 方法 
stoplImmediatePropagation() 中 止 其 他 事件 侦 听 器 的 方法 。 在 DOM Level 3 中 被 引入 


























10.6 | 标准 事件 





国 10.6.1 DOM Level 2 中 所 定义 的 事件 | 


DOM Level 2 定义 的 事件 类 型 可 以 分 为 以 下 4 种 类 型 。 表 10.4 一 表 10.7 总 结 了 所 定义 的 事件 类 型 。 

® HTMLEvent 

® MouseEvent 

® UlEvent 

® MutationEvent 

在 表 10.4 一 表 10.7 中 ,“ 冒 泡 ” 表 示 事 件 传 播 过 程 中 是 否 会 在 DOM 树 中 经 过 冒 泡 阶 段 ， 而 “默认 ” 
则 表示 是 否 含有 可 以 通过 preventDefault( 方法 取消 的 默认 行为 。 









































表 10.4 HTMLEvent 一 览 









































































































































事件 类 型 默 ; 触发 的 时 机 

load X X 文档 载 入 完成 后 

unload X X 文档 的 载 入 被 撤销 ( 例如 页 面 跳 转 等 情况 时 ) 
abort O X 妈 像 的 读 取 被 中 断 

error O X 发 生 了 错误 

select O 在 input 元素 或 textarea 元 素 中 选中 文本 
change O X 更 改 了 input 元 素 的 内 容 

submit O O 提交 了 表单 内 容 

reset O X 重 置 了 表单 内 容 

focus X X 元 素 获得 了 焦点 

blur X X 元 素 失去 了 焦点 

resize O X 窗口 尺寸 发 生 改 变 

scroll O X 发 生 了 窗口 滚动 


















































图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 





@ 200 一 一 一 第 3 部 分 客户 


表 10.5 ”MouseEvent 一 览 


端 JavaScript 






































事件 类 型 冒 ; 默 ; 触发 的 时 机 

click O O 元 素 被 点 击 

mousedown O O 在 元 素 上 方 按 下 了 鼠标 按钮 
mouseup O O 在 元 素 上 方 放 开 了 鼠标 按钮 
mouseout O O 鼠标 指针 从 元 素 上 方 离开 
mouseover O O 鼠标 指针 移动 至 了 元 素 上 方 
mousemove O X 鼠标 指针 在 元 素 上 方 移 如 


























表 10.6 UIEvent 一 览 



























































事件 类 型 冒 触发 的 时 机 

DOMFocusln O X 元 素 获取 了 焦点 

DOMFocusOut O xX 元 素 失 去 了 焦点 

DOMActivate O O 元 素 由 于 鼠标 点 击 或 按键 操作 后 被 激活 








表 10.7 MutationEvent 一 览 





























事件 类 型 触发 的 时 机 
DOMSubtreeModified 文档 内 容 发 生 了 更 改 
DOMNodelnserted 添加 了 子 节 点 ( 在 添加 后 被 触发 ) 
DOMNodeRemoved 出 除了 子 节 点 ( 在 删除 前 被 触发 ) 





DOMNodelnsertedlntoDocument 














向 文档 中 添 


0 了 节点 ( 在 添加 后 被 触发 ) 
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DOMNodeRemovedFromDocument 从 文档 中 删除 了 节点 ( 在 删除 前 被 触发 ) 
DOMAttrModified 节点 中 有 属性 发 生 了 更 改 
DOMCharacterDataModified 节点 中 的 文字 数据 发 生 了 更 改 


























国 10.6.2 DOM Level 3 中 所 定义 的 事件 
DOM Level 3 定义 的 事件 类 型 可 以 分 为 以 下 几 类 。 





@ UlEvent 

@ FocusEvent 
@ MouseEvent 
@ WheelEvent 
@ TextEvent 














这 里 添加 了 在 DOM Level 2 中 所 没有 的 键盘 事件 。 尽 管 现在 还 不 推荐 使 有 
入 事件 处 理 的 实现 。 但 必须 注意 的 是 ， 在 不 同 的 浏览 器 中 ， 对 键盘 
， 还 将 会 在 之 后 详 述 。 








过 各 种 浏览 器 中 已 经 提供 了 对 键盘 输 
EE 件 的 处 理会 有 所 不 同 。 对 于 这 一 点 
表 10.8 一 表 10.14 对 除了 不 被 推荐 的 MutationEvent 与 MutationNameEvent 以 外 的 寻 


hl 














@@ KeyboardEvent 


@ C 


ompositionEvent 


@ MutationEvent ( 不 推荐 使 用 ) 
@ MutationNameEvent ( 不 推荐 使 用 ) 
































日 DOM Level 3 Events ， 不 








有 件 都 进行 了 总 


结 。 其 中 ,“ 冒 泡 ” 表 示 事 件 传 播 过 程 中 是 否 会 在 DOM 树 中 经 过 冒 泡 阶 段 ,“ 默 认 ” 表 示 是 否 含有 可 以 





通过 preventDefault( 方法 取消 的 默认 行为 ， 而 “异步 ” 则 表示 该 事件 是 否 是 异 ; 
一 栏 为 X 的 事件 ， 所 注册 事件 侦 听 器 将 会 在 完成 所 有 处 型 








触发 了 这 样 的 事件 则 可 能 会 发 4 





同 的 。 应 该 根据 目的 选择 合适 的 事件 


表 10.8 Level 3 UIEvent 一 览 














执行 的 。 对 于 “ 蜡 步 ” 
后 才 开 始 执行 下 一 个 处 理 。 如 果 在 循环 过 程 中 








预想 之 外 的 情况 ， 请 务必 对 此 多 加 注意 。 此 外 ， 虽 然 在 同一 时 刻 可 能 会 
有 多 个 类 似 的 事件 被 触发 (例如 focus 和 focusin 等 )， 不 过 它们 在 是 否 会 经 过 冒 泡 阶 段 等 方面 的 行为 是 不 





类 型 。 







































































事件 类 型 异 冒 泡 默认 触发 的 时 机 
DOMActivate X O O 元 素 被 激活 ( 不 推荐 使 用 。 推 荐 使 用 click 
load O Xx x 文档 载 入 完成 后 
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( 续 ) 
事件 类 型 异 冒 ; 加 触发 的 时 机 
unload X X X 文档 的 载 入 被 撤销 ( 例如 页 面 跳 转 等 情况 时 ) 
abort X X X 到 像 的 读 取 被 中 断 
error O xX X 发 生 了 错误 
select X O x 在 input 元 素 或 textarea 元 素 中 选 定 文本 
resize X X X 窗口 尺寸 发 生 了 改变 
scroll O X X (人 窗口 发 生 了 滚动 
(*1 ) 仅 当 在 document 对 象 中 被 触发 时 才 会 冒 泡 至 window 





表 10.9 Level 3 FocusEvent 一览 



























































事件 类 型 异 冒 触发 的 时 机 

focus xX X X 元 素 获得 了 焦点 

blur X X x 元 素 失 去 了 焦点 

focusin xX O X 元 素 获得 了 焦点 

focusout X O 义 元 素 失去 了 焦点 

DOMFocusln X O X 元 素 获 得 了 焦点 ( 不 推荐 使 用 。 推 荐 使 用 focus 或 focusin 事件 ) 
DOMFocusOut “|X O X 元 素 失去 了 焦点 ( 不 推荐 使 用 。 推 荐 使 用 blur 或 focusout 事件 ) 








































































































事件 类 型 冒 ; By 触发 的 时 机 

click X O 日 对 元 素 进 行 了 点 击 

dblclick X O O 对 元 素 进 行 了 双击 

mousedown X O O 在 元 素 上 方 按 下 了 鼠标 按钮 
mouseup X O O 在 元 素 上 方 放 开 了 按 下 的 鼠标 按钮 
mouseenter X x X 鼠标 指针 移动 至 了 元 素 上 方 
mouseleave X X X 鼠标 指针 离开 了 元 素 上 方 
mouseover X O O 鼠标 指针 移动 至 了 元 素 上 方 
mouseout X O O 鼠标 指针 离开 了 元 素 上 方 
mousemove x O O 鼠标 指针 在 元 素 上 方 移动 























表 10.11 Level 3 WheelEvent 一 览 





Wheel O 


触发 的 时 机 


O O 滚动 了 鼠标 滚轮 (*1 ) 





表 10.12 Level 3 TextEvent 一 览 





触发 的 时 机 


O O 输入 了 字符 























触发 的 时 机 
keydown Xx O O 键 被 按 下 
keypress X O O 键 被 按 下 后 又 被 释放 ， 输 入 了 字符 
keyup X O O 放 开 了 被 按 下 的 键 




















表 10.14 Level 3 CompositionEvent 一 览 


















































事件 类 型 冒 泡 触发 的 时 机 
compositionstart |X O O 在 IME 中 开始 变换 
compositionupdate | X O X 在 IME 中 选择 了 变换 的 候选 项 
compositionend |X O X 在 IME 中 确定 了 变换 项 
DOM Level 3 对 事件 的 触发 顺序 也 做 了 规定 。 例 如 ， 对 于 事件 类 型 较 多 的 MouseEvent 来 说 ， 事 件 的 





触发 顺序 如 下 所 示 。 
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图 鼠标 指针 处 于 移动 过 程 中 的 事件 触发 顺序 


1. mousemove 2. mouseover 
3. mouseenter 4. mousemove 
5. mouseout 6. mouseleave 
国 双击 时 的 事件 触发 顺序 
1. mousedown 2. mousemove ( 如 有 必要 ) 
3. mouseup 4. click 
5. mousemove ( 如 有 必要 ) 6. mousedown 
7. mousemove ( 如 有 必要 ) 8. mouseup 
9. click 10. dblclick 


| 10.7 | 自 定 义 事件 


除了 标准 中 所 定义 的 事件 ， 还 能 够 定义 并 触发 自 定 义 的 事件 。 这 时 ， 可 以 通过 createEvent( 方法 来 创 
建 一 个 事件 对 象 ， 并 通过 目标 节点 的 dispatch0 方法 来 分 发 这 一 事件 对 象 。 这 样 一 来 ， 就 可 以 对 目标 节点 所 
指定 的 事件 处 理 程序 或 事件 侦 听 器 进行 调用 。 在 Internet Explorer 中 ， 我 们 需要 分 别 以 createEventObjectO 
方法 与 freEvent0 方法 来 奉 代 createEvent( 方法 与 dispatchEvent0 方法 (代码 清单 10.10 )。 


| 代码 清单 10.10 触发 自 定义 的 事件 


Var event = document .createEvent ('Events'); 

event .initEvent ('myevent', true, true); 

var target = document .getElementById('foo'); 

target.addEventListener('myevent', function () { 
alert('My event is fired.'); 

}, false); 

target .dispatchEvent (event); 


initEvent() 方法 的 第 1 个 参数 用 于 指定 事件 类 型 。 

在 使 用 dispatch0( 方法 时 需要 注意 的 是 ,该 方法 是 一 个 同步 执行 的 方法 。 它 并 不 会 以 队列 的 形式 依次 
逐一 执行 ， 而 会 立即 通过 相应 的 事件 侦 听 器 开始 执行 。 在 执行 完 之 后 ，dispatchEvent(0) 方法 将 会 返回 相应 
的 事件 侦 听 器 的 返回 值 。 

不 过 通过 setTimeout0) 方法 ， 我 们 就 能 够 实现 dispatch() 的 异步 执行 (代码 清单 10.11 )。 


| 代码 清单 10.11 异步 执行 dispatchEvent() 































































































window.setTimeout (function () { 
target .dispatchEvent (event); 
je OP 

















由 于 dispatchEvent( 是 同步 执行 的 ， 因 此 也 可 以 通过 显 式 地 调用 事件 侦 听 器 来 实现 相同 的 功能 。 既 
然 如 此 ， 为 什么 还 要 通过 dispatchEvent() 来 触发 自 定义 的 事件 呢 。 这 是 因为 通过 事件 触发 的 形式 可 以 
更 容易 地 添加 新 的 处 理 操作 。 相 比 使 用 具有 了 回调 函数 的 自 定 义 函 数 ， 通 过 在 DOM 标准 中 定义 的 
addEventListener() 方法 来 添加 新 的 回调 函数 的 方式 通用 性 更 强 ， 而 且 还 能 够 与 其 他 模块 共同 使 用 。 
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DOM 操作 与 事件 处 理 是 客户 端 JavaScript 
分 就 不 难 掌握 了 。 不 过 ， 如 果 要 开发 Web 


些 与 样式 的 处 理 、AJAX、 表 单 的 处 理 相关 的 知识 。 


11.1 样式 


客户 端 JavaScript 





实践 





的 基本 内 容 。 
应 用 程序 ， 仅 靠 


mn Umi eal 
这 些 知 


之 后 的 部 
不 够 的 。 在 此 将 补充 一 


知识 是 





对 样式 进行 操作 指 的 是 对 页 面 的 
够 创建 出 易 读 、 清 晰 、 美 观 的 Web 应 用 程序 。 














的 范畴 ， 需 要 CSS 方面 的 知识 。 而 借助 JavaScript， 























观 进行 操作 ， 而 不 是 页 面 的 内 容 。 只 要 设计 出 合适 的 样式 ， 就 能 
话 虽 如 此 ， 易 读 和 美观 主要 由 设计 师 负责 ， 属 于 静态 设计 
则 能 够 动态 地 变更 样式 ， 增 强 页 面 的 可 读 性 。 








JavaScript 实现 了 动态 样式 变更 ， 其 目的 是 为 





用 户 提供 视觉 反馈 。 例 如 ， 针 对 可 被 点 击 的 元 素 ， 如 果 








在 鼠标 指针 移动 至 该 元 素 上 方 时 改变 其 图 标 ， 
击 的 信息 。 当 鼠标 指针 位 于 DOM 元 素 之 上 
以 及 DOM 元 素 色彩 的 事件 侦 听 器 ， 并 将 


国 11.1.1 样式 的 变更 方法 
可 以 通过 以 下 这 些 方法 对 样式 进行 变更 。 
@ 通过 className 属性 更 改 class 名 
@ 通过 classList 属性 更 改 class 名 
@ 更 改 style 属性 
@ 直接 更 改 样式 表 
以 上 任意 一 种 方法 都 能 够 实现 样式 的 变 
转 通过 className 属性 更 改 class 名 


并 改变 











ws 





其 注册 

















更 。 根 

















改 前 与 更 改 好 的 class 名 的 样式 ， 寺 
如 代码 清单 11.1 所 示 。 在 这 个 例子 中 ， 当 点 击 时 ， 


| 代码 清单 11.1 通过 className 属性 更 改 class 名 


<!DOCTYPE HTML> 
<html lang="zh-CN">" 
<head> 
<meta charset="UTF=8"> 
<title> 更 改 class 名 </title> 
<style> 
.foo0o-before { 

















中 ”此 处 进行 了 本 地 化 处 理 将 


语言 


属性 改 为 了 中 文 。 下 同 。 
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时 ， 将 朋 
该 事件 ， 





灯 哥 (xiaoliang3275@163.com) 专 享 


变 DOM 元 素 的 颜色 ， 就 能 够 向 用 户 传达 该 元 素 可 被 点 
事件 。 只 需 准 备 一 个 能 够 改变 鼠标 指针 
就 能 够 实现 这 一 效果 


人 小 o 











中 发 mouseover 习 





据 不 同 的 用 途 选 择 合适 的 方法 即 可 。 





通过 更 改 DOM 元 素 的 class 名 来 改变 样式 是 一 种 最 为 简单 的 做 法 。 即 事先 通过 CSS 定义 好 对 应 于 更 
在 JavaScript 中 替换 class 名 。 可 以 通过 className 属性 设 定 class 名 ， 





起 忆 
月 时 


字符 的 颜色 与 背景 色 将 会 调换 。 


译 者 注 
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background-color: white; 
Solor black; 


.foo-after { 
background-color: black; 
color: white; 


</style> 
</head> 
<body> 
<div id="foo" class="foo-before">Click me.</div> 
二 ai 三 
var foo = document .getElementById('foo'); 
foo.onclick = function togglestyle() { 
this.className = (this.className === 'foo-before') ? 'foo-after' : 'foo-before'; 
hs 


</script> 
</body> 


</html> 

在 更 改 class 名 时 应 该 注意 并 清楚 了 解 的 是 ， 如 果 更 改 了 class 名， 到底 有 哪些 元 素 将 会 受到 影响 。 
例如 对 于 代码 清单 11.2 的 情况 ， 如 果 更 改 了 1 个 元 素 的 class 名 ， 其 相 邻 元 素 与 子孙 元 素 的 样式 也 会 一 起 
改变 。 这 时 ， 如 果 需 要 改变 的 元 素 过 多 ， 则 可 能 出 现 性 能 上 的 问题 。 不 过 ， 如 果 要 考虑 性 能 的 话 ， 指 定 






































了 相 邻 元 素 与 子 元 素 的 CSS 的 写法 本 身 就 是 有 问题 的 。 最 好 对 这 些 元 素 分 别 设 定 不 同 的 class 名 并 进行 
式样 操作 。 
| 代码 清单 11.2 ”在 更 改 class 名 后 相关 元 素 的 样式 也 会 改变 


<!IDOCTYPE HIML> 
<html lang="zh-CN"> 





<head> 
<meta charset="UTF-8"> 
<title> 在 变更 class 名 后 相关 元 素 的 样式 也 会 改变 </title> 
<style> 
.foo-before { 
background-color: white; 
Golor: black; 








.foo-before p { 
text-decoration: none; 


.foo-before + div { 
text-decoration: none; 


.foo-after { 
background-color: black; 
color: white; 


.foo-after p { 
text-decoration: underline; 


.foo-after + div { 
text-decoration: line-through; 


</style> 
</head> 
<body> 
<qim ad "fooMmelass rioo beforey 
<p>one</p> 
<p>two</p> 
<p>three</p> 
<pEEour =/ 
</div> 
<div> 
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This is sample text. 
Edaw 
<script> 
var foo = document .getElementByld(,foo'); 
foo.onclick = function togglestyle() { 
this.className = (this.className === ,foo-before') ? ,foo-after : ,foo-before'; 
上 


ET 


</body> 
</html> 


围 通过 classList 属性 更 改 class 名 
还 可 以 通过 对 在 HTMLS5 中 新 增 的 classList 属性 进行 操作 ， 来 更 改 class 名 。 与 通过 对 className 属 
性 进行 操作 以 更 改 class 名 相 比 ， 这 种 方法 更 加 容易 理解 ( 代码 清单 11.3 )。 


| 代码 清单 11.3 ”在 更 改 class 名 后 相关 元 素 的 样式 也 会 改变 






































ES 
var foo = document .getElementByIlid('foo'); 
foo.onclick = function togglestyle() { 
Bhievoelessrlist Sagqalel oo artterm 
this.classList.toggle('foo-before'); 
bp 


/eerie 
表 11.1 总 结 了 可 以 使 用 classList 属性 的 方法 。classList 属性 是 一 种 对 DOM TokenList 接口 的 
实现 。 























表 11.1 可 以 使 用 classList 属性 的 方法 






































contains(clazz) 判断 在 class 名 中 是 否 含 有 clazz 

add(clazz) 向 class 名 中 添加 clazz 

remove(clazz) 从 class 名 中 删除 clazz 

toggle(clazz) 如 果 在 class 名 中 含有 clazz 则 将 它 删除 ， 否 则 向 class 名 中 添加 clazz 
园 更 改 style 属性 





可 以 直接 更 改 DOM 元 素 的 style 属性 的 值 以 实现 样式 的 更 改 。 这 与 更 改 class 名 的 情况 不 同 ， 样 式 更 
改 的 范围 被 明确 地 限定 于 这 个 元 素 。 另 外 ， 通 过 style 属性 指定 的 内 容 的 应 用 优先 级 将 仅 次 于 CSS 中 被 标 
记 为 limportant 的 元 素 。 

style 属性 中 的 各 个 属性 名 是 由 在 CSS 中 所 指定 的 属性 名 演变 而 来 的 ， 其 更 改 之 处 为 去 除了 属性 名 
中 的 连 字符 (- ) 并 将 连 字 符 之 后 的 字母 改 为 了 大 写 形式 。 例 如 ， 对 于 CSS 中 的 margin-top 属性 ， 在 
JavaScript 中 则 可 以 通过 marginTop 的 名 称 使 用 。 之 所 以 要 将 连 字符 去 除 ， 是 因为 连 字 符 在 JavaScript 将 
被 识别 为 减 号 。 此 外 ， 由 于 float 在 JavaScript 中 是 作为 保留 字 使 用 的 ， 因 此 float 属性 不 能 直接 使 用 。 如 
果 要 在 JavaScript 中 更 改 float 属性 ， 则 需要 通过 cssFloat 属性 来 进行 操作 。 

在 代码 清单 11.4 中 是 一 个 更 改 style 属性 更 改 的 例子 。 


| 代码 清单 11.4 更改 style 属 


<!DOCTYPE HIML> 
有 已 mi 人 可 三 业 过 二 人 NU 
<head> 
<meta charset="UTF=8"> 
<title> 更 改 style 属性 </title> 
<style> 
Eey 
background-color: white; 
olor Black; 
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</style> 
</head> 
<body> 
= toon Lio too el me /dl 
<div id="bar">This is bar.</divs 
ER SC 
var foo = document .getElementById('foo'); 


Foor onelielke 





function toggleSstyle() 


{ 




































































var style = this.style; 
if (!style.cssFloat) { 
styvle.csesPloat ss "left’; 
style.backgroundColor = 'black'; 
style.color = 'white'; 
} else { 
Style.cBasFloat = "> 
style.backgroundColor = 'white'; 
stvle color = Dec 
} 
hs 
</script> 
</body> 
</html> 
在 更 改 style 属性 时 ， 应 当 要 注意 的 是 ， 功 能 和 设计 是 无 法 分 离 的 。 试 考虑 仅 更 改色 彩 的 情况 。 这 时 ， 
如 何 对 style 属性 的 更 改进 行 处 理 是 一 个 功能 方面 的 问题 ， 而 应 该 如 何 更 改色 彩 则 是 设计 方面 的 问题 ， 并 不 
是 功能 方面 的 问题 。 从 功能 上 来 说 ， 只 需要 改变 其 样式 就 能 够 实现 目的 了 。 所 以 说 ,在 JavaScript 中 我 们 只 
需要 考虑 如 何 实 现 对 样式 的 更 改 即 可 ， 至 于 具体 应 该 如 何 更 改 样式 ， 则 应 该 由 CSS 负责 。 
事实 上 ， 如 果 从 保守 的 角度 或 团队 开发 的 角度 来 看 待 网 页 开发 ， 将 设计 部 分 与 功能 部 分 分 离 会 带 来 
多 种 好 处 。 结 构 由 HTML 实现 ， 功 能 由 JavaScript 实现 ， 设 计 则 由 CSS 实现 。 将 三 


部 分 代码 分 开 书 写 能 


够 使 整体 条 理 变 得 清晰 易 懂 。 


国 直接 更 改 样式 表 

















还 可 以 直接 对 是 否 应 














样式 表 进 行 设 定 。 如 果 将 link 元 素 与 style 元 素 的 disabled 属性 设 为 tue， 相 











应 的 样式 表 就 将 被 禁用 








(代码 清单 11.5 )。 


| 代码 清单 11.5 ”直接 更 改 样式 表 


<!DOCTYPE HIML> 
<htemllang = Zi CN > 
<head> 


<meta charset="UTF=8"3S 

<title> 直接 更 改 样式 表 </title> 

<link rel="stylesheet" type="text/css" href="style-a.css" id="style-a" disabled="true"> 
<link rel="stylesheet" type="text/css" hred="style-b.css" id="style-b" disabled="true"> 
<style id="style-c" disabled="true"> 


#foo { 


backgreound Color: 


</style> 
二 Bo 三 


function change (id, enable) 


#999; 


{ 

















// 在 勾 选 了 复 选 框 之 后 启用 样式 

document .getElementById(id) .disabled = !enable; 
} 
window.addEventListener('load', function () { 

// 在 初始 化 处 理 中 禁用 所 有 的 样式 

Var styles = document.styleSheets; 

for (var i = 0; i < styles.length; i++) { 

styles[i] .disabled = true; 

} 
}, false); 
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</head> 
<body> 
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=davic = toou> Phils iso a Samoles /dy 


<input type="checkbox" 
<input type="checkbox" 
<input type="checkbox" 


</body> 
/hermes 


a 


/* style-a.css 的 内 容 */ 


#foo { 
font-size: 
} 


x-large; 


/* sytle-b.css 的 内 容 */ 


#foo { 


} 


E> 


需要 更 改 整 个 页 


text-decoration: 


面 的 样式 时 











准备 了 一 些 样式 主题 ， 











如 果 


ba 








underline; 





， 就 可 以 采用 这 种 切换 样式 表 启 月 














onchange="change('style-a', this.checked)"> 
onchange="change ('style-b', this.checked)"> 
onchange="change('style-c', this.checked)"> 











需要 让 用 / 
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禁用 状态 的 方式 。 例 如 ， 对 于 已 经 事先 





3 选择 自己 喜欢 的 主题 以 显示 页 面 内 容 的 情况 ， 就 可 以 通过 这 种 方式 实现 。 








不 需要 切换 整个 主题 ， 则 没有 必要 专门 通过 启 





class 名 ， 或 更 改 style 属性 的 值 且 


国 11.1.2 位 置 的 设 定 
在 更 改 样式 时 ， 诸 如 文字 大 小 或 背景 颜色 等 方面 的 更 改 操作 理解 起 来 并 不 难 ， 但 如 果 要 更 改 DOM 
































[可 。 




















元 素 的 位 置 ， 则 必须 知道 更 多 的 信息 


网 页 布局 。 


在 设 定 位 置 时 ， 最 为 关键 的 两 点 是 position 属 履 





素 的 宽度 和 高 度 有 所 
围 position 属性 


position 属性 可 以 被 指 





® static 


如 果 在 此 设 定 了 static 以 外 的 值 ， 就 能 够 设置 top、bottom、left、 


围 static 





了 解 。 


® fixed 














定 为 以 下 几 种 值 之 一 。 


@@ absolute @ relative 





LE 与 鼠标 指针 的 位 置 。 另 多 














right 属性 。 


position 属性 的 默认 值 。 将 根据 HTML 中 所 写 的 标签 来 决定 元 素 的 配置 。 这 种 情况 下 无 法 通 














left 之 类 的 属性 来 指定 元 素 的 位 置 。 


园 fixed 


妇 
于 浏览 器 窗口 的 位 置 ， 


Fs 














因此 即使 





说 元 素 将 始终 保持 在 同一 位 置 。 





该 值 无 法 在 Internet Explorer 6 中 使 用 


园 absolute 








如 果 将 position 局 








定 。 通 常情 况 下 都 是 元 素 与 body 元 素 之 间 的 相对 位 置 ， 


图 灵 社 区 











对 页 面 进行 了 滚动 操作 ， 元 素 在 画 














o 


























] 或 禁用 样式 表 来 实现 样式 的 更 改 。 直 接 更 改 


息 。 学 会 如 何 将 DOM 元 素 设 置 于 任意 的 位 置 ， 将 有 助 于 实现 复杂 的 


则 是 要 对 如 何 处 理 DOM 元 


过 top 或 


果 将 position 属性 指定 为 fixed， 则 将 会 以 浏览 器 窗口 为 基准 来 确定 元 素 的 相对 位 置 。 由 于 是 相对 
而 上 的 位 置 也 不 会 发 生 改变 





属性 指定 为 了 absolute， 则 可 以 对 该 元 素 与 含有 该 元 素 的 元 素 之 间 的 相对 位 置 进行 设 
不 过 如 果 散 套 了 非 static 值 的 其 他 元 素 ， 则 将 以 
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该 元 素 为 基准 确定 相对 位 置 。 
转 relative 

如 果 将 position 属性 指定 为 了 relative， 则 会 在 根据 HTML 中 所 写 的 标签 进行 配置 的 基础 上 ， 对 元 素 
的 相对 位 置 进 行 设置 。 

不 过 ， 如 果 已 经 指定 了 relative 值 ， 一 般 也 就 不 会 再 设置 top 或 left 之 类 的 值 了 。 通 党 的 做 法 是 ， 以 
被 设 定 为 absolute 的 元 素 为 标准 来 进行 位 置 设 定 。 根 据 对 absolute 的 说 明 可 以 知道 ， 被 设 定 为 absolute 属性 
的 元 素 ， 是 以 含有 该 元 素 的 元 素 中 position 属性 没有 被 设 定 为 static 的 元 素 为 基准 来 确定 位 置 的 。 而 被 设 定 
为 relative 的 元 素 的 位 置 与 其 被 设 定 为 static 时 的 情况 并 没有 什么 不 同 ， 将 会 被 动态 地 置 于 正确 的 位 置 。 这 
样 一 来 ， 就 能 够 按照 期 望 的 那样 ， 根 据 其 与 被 设 定 为 relative 值 的 元 素 的 相对 位 置 来 配置 该 元 素 的 位 置 。 


大 11.1.3 位 置 | 


如 果 要 实现 在 鼠标 点 击 位 置 附近 显示 一 个 框 这 样 的 效果 ， 则 必须 要 知道 点 击 位 置 。 在 MouseEvent 被 
触发 时 ， 相 应 的 Event 对 象 提供 了 多 个 属性 来 获取 这 一 位 置 。 这 时 的 问题 在 于 ， 需 要 知道 点 击 的 位 置 是 
以 什么 为 基准 来 表示 的 。 


function onclick(event) { 


) // 通过 event 对 象 获取 鼠标 指针 的 位 置 ， 并 进行 相应 的 处 理 


转 屏幕 坐标 
可 以 通过 screenX 和 screenY 属性 来 获取 屏幕 坐标 。 屏 幕 坐 标 是 一 种 以 计算 机 显示 器 的 左上 角 为 原点 
的 坐标 系 。 不 过 由 于 这 只 是 屏幕 上 的 位 置 坐标 ， 因 此 能 够 对 其 进行 有 效 利 用 的 情况 很 少 。 











下 
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轩 窗口 坐标 

可 以 通过 clientX 和 clientY 属性 来 获取 窗口 坐标 。 窗 口 坐标 是 一 种 以 浏览 器 的 显示 范围 的 左上 角 为 
原点 的 坐标 系 。 这 一 坐标 系 与 文档 、 元 素 的 深 动 情况 无 关 ， 其 坐标 值 仅 由 内 容 的 显示 位 置 决 定 。 
国 文档 坐标 






































可 以 通过 pageX 和 pageY 属性 来 获取 元 素 在 文档 中 的 位 置 。 文 档 坐 标 是 一 种 以 文档 页 面 的 左上 角 为 
原点 的 坐标 系 。 与 窗口 坐标 不 同 ， 其 坐标 值 与 显示 位 置 无 关 ， 是 由 元 素 在 整个 文档 中 的 位 置 决定 的 。 

DOM 对 screenX 与 clientX 进行 了 定义 ， 但 没有 定义 pageX。 这 一 坐标 系 是 由 浏览 器 自 定 义 实 现 的 。 
Internet Explorer 8 以 及 更 早 版 本 无 法 使 用 这 一 坐标 。 
图 在 特定 元 素 内 的 相对 坐标 

通过 layerX 与 layerY， 或 offsetX 与 offsetY 属性 ， 可 以 获取 触发 了 事件 的 元 素 内 的 相对 坐标 。 这 些 
属性 没有 在 DOM 中 被 定义 ， 是 由 浏览 器 自 定义 实现 的 功能 。 

Element.getBoundingClientRect() 虽然 不 能 直接 取得 相对 坐标 ， 但 也 能 实现 类 似 的 功能 。 该 方法 是 
在 CSSOMView Module 这 一 与 文档 显示 方式 有 关 的 标准 中 被 定义 的 。 通 过 使 用 getBoundingClientRect()， 
能 够 获取 元 素 范围 信息 的 窗口 坐标 。 这 里 的 范围 信息 指 的 是 ， 距 离 左 侧 的 距离 ( left )、 距 离 上 方 的 距离 
(top )、 宽 度 (width ) 与 高 度 (height )。 可 以 像 代码 清单 11.6 中 这 样 ， 将 这 些 值 与 clientX 和 clientY 结合 
使 用 以 获取 元 素 内 的 相对 坐标 。 

而 代码 清单 11.7 是 一 个 完整 的 例子 ， 它 将 在 点 击 的 位 置 显示 元 素 。 


上 代码 清单 11.6 在 元 素 内 取得 相对 坐标 


function onclick(event) { 
var x = event.clientx; // 窗口 坐标 系 中 鼠标 指针 的 x 坐标 
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var y = event .clientY; // 窗口 坐标 系 中 鼠标 指针 的 y 坐标 
Var r = event.target.getBoundingClientRect (); // 窗口 坐标 系 中 被 点 击 元 素 的 范围 信息 
2 oleae // 鼠标 指针 在 被 点 击 元 素 内 部 的 x 坐标 
y -= r.top; // 鼠标 指针 在 被 点 击 元 素 内 部 的 y 坐标 

} 

有 代码 清单 11.7 一 个 在 点 击 位 置 显示 元 素 的 例子 
<div id="foo" style="width: 2000px; height: 2000px; position: relative;"> 


<div id="message" style="position: absolute; background: lightgray; width: 100px;">Hello, world!</div> 


</div> 
Scene 
var foo 


function getPosition (event) 


RS 
var y 
WE a 
> 
WW ol 


event .clientx; 
event .clienty; 
event .target .getBoundingClientRect () ; 


EEEUrn 本 


} 





document .getElementByI1id('foo'); 


{ 














foo.addEventListener('click', function (event) { 
var message = document .getElementByld('message') 
if (event.target === message) { 
// 如 果 点 击 message， 则 不 进行 操作 
return; 
Var pos = getPosition(event); 
message.style.left = pos.x; 
message.style.top = pos.y; 


}, false); 
/eer 


国 11.1.4 动画 


可 以 通过 动画 使 村 


式 以 一 定 的 速率 逐 





position:absolute 的 元 素 的 left 属性 进行 渐变 。 


度 (opacity ) 的 值 。 














为 了 使 样式 可 以 以 


一 定 的 速率 逐 





渐变 化 ， 


渐变 化 。 如 果 要 实现 移动 的 动画 效 明 
如 果 要 实现 淡 入 淡出 的 效 细 


民 
人 人， 


则 可 L 





日 、 
下， 





则 可 以 对 被 设 定 为 
义 逐 渐 改 变 元 素 的 透明 


自然 就 需要 让 JavaScript 定期 执行 。setInterval 是 一 个 能 够 


定期 执行 JavaScript 的 函数 。 在 对 setInterval 指定 了 某 个 值 之 后 ， 每 经 过 所 指定 的 时 间 ， 就 会 执行 一 次 特 


定 的 函 





| 代码 清单 11.8 ”动画 




















数 。 代 码 清单 11. 








8 是 


个 使 月 


示例。 











<guv d= oo sv ie ulion aDsolter rhs ls a smoles /ol 
rel alae 
Var elem = document .getElementById!('foo"'); 
var frame = 0; 
setInterval (function () { 
frame += 1; 
elem.style.left = frame * 10 + 'px'; 
Jo 大 每 经 过 100 毫秒 将 向 右 移 功 10 个 像素 
ErTOE 
此 外 ， 就 算 不 使 用 JavaScript， 仅 通过 CSS3 也 能 够 实现 各 种 各 样 的 动画 效果 。 


览 絮 的 具体 实现 有 关 ， 不 过 一 般 来 说 ， 与 通过 JavaScript 实现 的 动画 相 比 ， 
好 。 如 今 很 多 智能 手机 中 都 采用 了 支持 CSS3 的 浏览 器 ， 由 于 





器 中 的 话 ， 则 应 该 更 





多 地 利用 CSS 来 实现 动画 效果 
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虽然 实际 的 性 能 和 浏 














ee 
F 上 述 性 能 原因 ， 如 果 网 页 运行 于 这 些 浏览 
四 . 
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11.2 | AJAX 





AJAX 是 Asynchronous JavaScript + XML 的 简称 "。AJAX 一 词 的 实际 含义 为 “不 发 生 页 面 跳 转 、 异 
步 载 入 内容 并 改写 页 面 内 容 的 技术 ”。 在 实际 操作 中 ，AJAX 不 仅仅 会 使 用 XML 数据 ， 很 多 时 候 也 会 对 
JSON 或 纯 文本 进行 操作 。AJAX 这 个 词 是 由 Jesse James Garrett 在 2005 年 命名 的 。 不 过 ， 在 那 之 前 就 已 
经 有 使 用 AJAX 的 网 站 。 众 所 周知 ，Google 的 Gmail 就 是 一 个 利用 了 AJAX 的 优秀 范例 。 如 今 ，AJAX 
正在 全 世界 范围 内 迅速 地 得 到 普及 。 


国 11.2.1 异步 处 理 的 优点 | 


AJAX 的 关键 在 于 它 是 以 异步 的 方式 执行 的 。 异步 处 理 的 优点 是 不 会 让 用 户 白白 等 待 。 对 于 同步 处 
理 来 说 ， 在 处 理 完 来 自 服务 器 的 响应 之 前 ， 用 户 无 法 进行 任何 其 他 操作 ， 只 能 等 待 。 如 果 服 务 需 的 响应 
发 生 了 延迟 ， 会 让 用 户 误 以 为 页 面 失 去 了 响应 。 在 优先 考虑 用 户 体验 时 ， 与 同步 处 理 相 比 ， 采 用 异步 处 
理 的 方式 更 为 合适 ， 这 一 点 是 显而易见 的 。JavaScript 是 一 种 事件 驱动 程序 设计 语言 ， 在 很 多 地 方 都 会 用 
到 异步 处 理 ， 所 以 要 理解 异步 处 理 并 不 是 一 件 难 事 。 


























































































































11.2.2 XMLHttpRequest | 


如 果 要 通过 JavaScript 动态 地 向 服务 器 发 送 请 求 ， 则 需要 使 用 XMLHttpRequest 对 象 。 不 过 在 这 里 要 
稍微 提醒 一 下 大 家 ，XMLHttpRequest 目前 尚未 被 制定 为 标准 。 之 所 以 说 是 “稍微 "， 是 因为 那些 现代 的 
浏览 器 自然 不 必 多 说 ， 即 使 是 Internet Explorer 也 在 7 以 及 之 后 的 版 本 里 全 都 使 用 了 通用 的 API， 因 此 它 
已 经 成 为 了 一 种 事实 标准 。 考 虑 到 这 点 ， 尚 未 标准 化 也 就 不 是 什么 问题 了 。 问 题 在 于 Internet Explorer 6。 
不 过 它 也 仅仅 是 在 对 象 的 创建 方式 上 有 所 不 同 ， 对 象 所 含有 的 方法 与 其 他 浏览 锅 中 的 实现 是 通用 的 。 可 
以 像 代 码 清单 11.9 这 样 ， 在 Internet Explorer 6 中 创建 XMLHttpRequest 的 替代 对 象 。 


| 代码 清单 11.9 XMLHttpRequest 的 跨 浏览 器 支持 


if (lwindow.XMLHttpRequest) { 
// Internet Explorer 6 
XMLHttpRequest = function () { 
var objs = ['MSXML2 .XMLHTTP.6.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft .XMLHTTP']; 
for (var i = 0; i < objs.length; i++) { 
Var obj = objs[il]; 
try { 
return new ActiveXObject (obj); 
Ia 





























































































































throw new Error('Cannot create XMLHttpRequest object.'); 
} 
| 
var xhr = new XMLHttpRequest () 
国 11.2.3 基本 的 处 理 流程 | 
接 下 来 我 们 来 说 明 使 用 XMLHttpRequest 时 的 基本 处 理 流 程 。 





























GD 亦 可 采用 仅 首 字母 大 写 的 Ajax 写法 。 译 者 注 
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国 XMLHttpRequest 对 象 的 创建 

在 上 一 节 中 ， 我 们 已 经 说 明了 了 XMLHttpRequest 对 象 的 创建 方法 。 在 创建 了 XMLHttpRequest 对 象 之 
后 ， 就 需要 对 服务 器 的 URL 进行 指定 ， 以 发 送 请 求 ( 代码 清单 11.10 )。 
| 代码 清单 11.10 发 送 请 求 


Var xhr = new XMLHttpRequest (); 
xhr.onreadystatechange = function() { 
if (xhr.readySstate == 4) { 
if (xhr.status == 200) { 
alert (xhr.responseText); 











} 
后 
xhr.open('GET', 'http://example.com/something'); 
xhr.setRequestHeader ('If-Modiified-Since', 'Thu 01 Jun 1970 00:00:00 GMT'); 
xhe sendl(r ul 


onreadystatechange 这 一 事件 处 理 程序 将 会 在 XMLHttpRequest 对 象 的 状态 发 生变 化 时 被 调用 。 用 于 
表示 状态 的 readyState 的 取 值 范围 为 0~4， 其 中 4 表示 已 经 完成 了 对 来 自 服务 器 的 响应 的 接收 处 理 。 表 
11.2 解释 了 0~4 所 表示 的 含义 。 


表 11.2 readyState 的 含义 
readyState 含义 
0 open() 尚未 被 调 
1 send() 尚未 被 调 
2 服务 器 尚未 返回 响应 
3 正在 接收 来 自 服务 器 的 吊 
4 完成 了 对 来 自 服务 器 的 响 

在 status 中 包含 了 响应 的 状态 码 。 如 果 通 信 正 常 ， 该 值 为 200。 关 于 HTTP 响应 的 状态 码 的 详细 
信息 ， 请 参考 其 他 相关 书籍 。 

在 responseText 中 包含 了 服务 器 响应 的 字符 串 形式 。 而 对 于 XML 的 情况 ， 响 应 会 以 DOM 对 象 
的 形式 包含 于 responseXML 之 中 。 根 据 情况 选择 合适 的 响应 类 型 即 可 。 不 过 无 论 响应 的 形式 如 何 ， 在 
responseText 中 都 会 含有 相应 的 值 ， 所 以 只 要 使 用 responseText 的 值 就 不 会 有 什么 问题 了 。 本 来 ， 如 果 一 
个 响应 是 XML 格式 的 ， 自 然 是 应 该 引用 responseXML 会 更 好 ， 不 过 现在 流行 的 做 法 是 通过 JSON 通信 ， 
所 以 需要 使 用 XML 的 情况 也 变 少 了 。 通 过 JSON 进行 通信 的 方式 所 需要 的 传送 数据 量 较 少 ， 对 数据 的 处 
理 也 更 方便 ， 因 而 也 很 常见 。 这 部 分 处 理 和 服务 器 的 情况 也 有 关 ， 可 能 会 有 各 种 各 样 的 限制 。 但 如 果 可 

能 ， 还 是 推荐 采用 JSON 格式 来 传输 数据 。 
传递 给 open() 的 参数 是 HTTP 请 求 类 型 及 通信 目标 服务 器 的 URL。 

在 这 个 例子 中 ， 仅 传递 了 两 个 参数 给 open0。 但 实际 上 它 还 能 再 接受 3 个 参数 。 

如 果 传 递 了 false 值 至 第 3 个 参数 ，XMLHttpRequest 就 会 执行 同步 通信 。 该 参数 的 默认 值 为 tue， 也 
就 是 将 执行 异步 通信 。 如 果 是 同步 通信 的 话 ， 自 然 在 此 期 间 无 法 执行 其 他 操作 。 对 于 用 户 的 可 操作 性 来 
说 ， 执 行 同步 通信 几乎 不 具有 任何 优点 。 第 4 个 参数 与 第 5 个 参数 分 别 是 用 户 ID 和 密码 。 在 向 需要 进行 
身份 认证 的 服务 器 发 送 请 求 时 要 用 到 这 两 个 参数 。 

从 open0 这 一 方法 名 就 可 以 知道 ， 其 作用 只 是 创建 与 服务 器 的 连接 ， 并 不 具备 其 他 的 功能 。 它 只 是 
保存 了 HTTP 请 求 类 型 以 及 服务 器 URL 而 已 。 

之 后 的 setRequestHeader( 用 于 请 求 头 部 的 设置 。 在 通信 的 目标 服务 器 中 会 自动 发 送 对 应 的 Cookie， 
所 以 并 不 需要 显 式 地 设置 。 当 然 也 可 以 显 式 地 设 定 一 个 不 同 的 值 。 

实际 向 服务 器 发 送 请 求 的 是 send0。 如 果 是 POST 请 求 类 型 ， 则 会 将 参数 所 收 到 的 数据 发 送 至 服务 
器 。 如 果 是 GET 请 求 类 型 或 HEAD 请 求 类 型 等 不 需要 发 送 数据 的 HTTP 请 求 类 型 ， 则 参数 为 null。 
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围 11.2.4 同步 通信 











接 下 来 ， 我 们 说 明 一 下 如 何 通过 XMLHttpRequest 进行 同步 通信 。 如 

















果 要 执行 同步 通信 ， 则 不 必 


对 onreadystatechange 事件 处 理 程序 进行 设 定 。 在 执行 了 send0 之 后 该 处 理 将 会 进入 待机 状态 ， 只 要 在 


send() 之 后 继续 书写 对 响应 的 处 理 操作 即 可 〈 代码 清单 11.11 )。 


| 代码 清单 11.11 ”通过 XMLHttpRequest 进行 同步 通信 


var xhr = new XMLHttpRequest (); 





xhr.open('GET', 'http://example.com/something', false); 

// 将 第 3 个 参数 指定 为 false 的 话 就 会 执行 同步 通信 

Sob a Mogi Sme en uo nn 
xhr.send (null) // 此 时 ， 客 户 端 央 侧 的 处 理 将 会 进入 待机 状态 

Wh 攻坚 此 时 已 经 完成 了 对 响 念 的 接收 

LE (DAE aes sss D0) 


alert (xhr.responseText); 


} 


QO OO GME 


在 进行 同步 通信 时 ， 代 码 顺序 和 实际 的 通信 过 程 是 对 应 的 ， 理 解 起 来 会 更 为 容易 。 不 过 在 实际 操作 
中 通常 不 会 使 用 这 种 方式 。 在 客户 端 JavaScript 中 最 重要 的 是 如 何 减少 用 户 的 等 待 时 间 ， 尽 可 能 向 用 户 提 















































供 流畅 的 使 用 体验 。 所 以 ， 应 当 避 免 使 用 同步 通信 来 减少 等 待 时 间 。 
转 11.2.5 超时 











在 进行 同步 通信 时 ， 如 果 通 信 过 程 很 费时 ， 处 理 操 作 则 会 在 send(0) 处 等 待 ， 其 他 的 处 理 将 会 无 法 进 


行 。 这 时 ， 应 当 在 长 时 间 无 法 取得 响应 的 情况 下 取消 该 请 求 。 这 种 情况 称 为 i 





























青 求 超时 。 


XMLHttpRequest 基本 上 采用 的 都 是 异步 通信 ， 所 以 无 论 通信 和 需要 花费 多 少时 间 ， 都 不 会 影响 用 户 操 




















作 。 不 过 有 些 时 候 ， 最 好 设置 合适 的 超时 时 间 。 








例如 ， 有 时 会 需要 一 定 的 时 间 间 隔 发 送 请 求 以 改写 页 面 的 内 容 。 如 果 在 响应 返回 之 前 就 继续 发 送 下 























一 个 请 求 ， 就 会 产生 大 量 通信 。 这 对 于 客户 端 与 服务 器 来 说 都 不 是 一 件 好 事 

















和 。 对 于 这 个 问题 ， 专 门 设计 


一 种 实现 ， 使 其 只 有 在 收 到 前 一 个 请 求 的 响应 之 后 才 发 送 下 一 个 请 求 ， 也 是 一 种 不 错 的 做 法 。 不 过 其 实 








只 要 简单 地 对 超时 时 间 进 行 设置 ， 就 能 够 避免 同时 产生 多 个 请 求 的 问题 了 ( 
| 通过 超时 来 限制 连接 数 的 增加 




















































客户 端 每 10 秒 
发 送 一 次 请 求 



























































估 作 次 请 求 。 ST 
` 走 悄 和 5 下 aa 示 小 > 能 
汪汪 返回 响应 ) 














图 11.1)。 


如 果 要 取消 请 求 ， 其 实 只 需要 执行 abort( 方法 即 可 。 而 通过 setTimeout0 方法 可 以 在 一 定时 间 后 执 
行 abort0 方法 ， 从 而 实现 超时 功能 。 另 外 还 有 一 个 clearTimeout( 方法 ， 如 果 在 一 定时 间 内 收 到 了 返回 的 





响应 ， 该 方法 就 将 会 取消 abort0 的 执行 ( 代码 清单 11.12 )。 
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| 代码 清单 11.12 超时 处 理 


var Xxhr = new XMLHttpRequest(); 

var timerId = window.setTimeout (function() { 
ee oes (OE 

}, 5000); // 5 秒 后 将 会 超时 





xhr.onreadystatechange = function() { 
if (request.readyState === 4) { 
// 取消 超时 处 理 
window.clearTimeout (timeId); 
} 
be 


国 11.2.6 响应 | 


园 通用 类 型 的 响应 
可 以 通过 responseText 属性 来 引用 一 个 XMLHttpRequest 响应 。 即 使 目标 的 Content type 不 是 text/ 
plain， 也 能 够 以 该 属性 进行 设 定 。 这 时 所 使 用 的 是 响应 的 body 部 分 的 内 容 。 例 如 ， 如 果 收 到 的 是 一 个 
HTML， 则 可 以 选择 将 某 个 元 素 的 innerHTML 属性 设 定 为 responseText 的 内 容 ( 代码 清单 11.13 )。 
有 代码 清单 11.13 通用 类 型 的 响应 
J xhr = XMLHttpRequest () ; 


Var dom = document .getElementByIlid('foo'); 
foo.innerHTML = xhr.responseText; 


国 XML 类 型 的 响应 

从 XMLHttpRequest 这 一 名 称 也 能 看 出 ， 它 能 够 以 XML 的 形式 接收 XMLHttpRequest 的 响应 。 在 接 
收 时 ， 最 好 使 用 responseXML 属性 而 不 是 responseText 属性 。 因 为 responseXML 属性 能 够 对 XML 的 解 
析 结 果 进 行 引 用 (代码 清单 11.14 )。 
有 代码 清单 11.14 XML 类 型 的 响应 


Var xhr = XMLHttpRequest (); 






























































Var Xml = xhr.responseXML; 


// 假定 xml 的 内 部 是 这 样 的 内 容 

We 

WA <apiversion>1.0</apiversion> 

Wi <value>foo</value> 

We es ul 

alert (xml .getElementsByTagName ('value') [0] .firstChild.nodeValue); // => foo 


图 JSON 形式 的 响应 

最 近 ， 返 回 JSON 的 API 越 来 越 多 了 。XML 的 书写 过 于 宛 长 ， 响 应 的 体积 也 越 来 越 大 。 而 且 在 
JavaScript 中 对 XML 进行 操作 也 需要 书写 见长 的 代码 。 于 是 ， 相 对 于 XML 而 言 ， 更 易于 处 理 、 书 写 也 
更 简单 的 JSON 受到 了 欢迎 。 

如 果 有 一 个 与 responseXML 属性 类 似 的 responseJSON 属性 的 话 ， 一 切 就 很 方便 了 ， 可 惜 的 是 ， 并 不 
存在 这 样 的 属性 。 如 果 要 接收 JION， 就 必须 将 responseText 属性 的 内 容 转换 为 JSON。 这 时 ， 需 要 使 用 
的 是 JSON.parse0 方法 〈 代码 清单 11.15 )。 
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上 代码 清单 11.15 JSON 类 型 的 响应 


var xhr = XMLHttpRequest (); 
7 


Var json = JSON.parse (xhr.responseText); 


Val 人 json 的 内 部 是 这 样 的 内 容 
多 


WA Wa ers ion on 

pe ova le foo 

We 

alert (json.value) ; W/oo 








在 浏览 器 对 JSON.parse 实现 之 前 ， 是 通过 eval 来 对 responseText 求 值 的 。 如 果 JSON 字符 串 的 内 
容 不 正确 ， 有 可 能 导致 页 面 数 据 的 损坏 或 被 错误 地 改写 。 为 了 避免 发 生 这 种 情况 ， 应 该 选择 使 用 JSON. 
parse() 方法 。 在 Internet Explorer 7 以 及 更 早 的 版 本 中 ， 没 有 对 JSON.parse0 方法 进行 实现 。 所 以 在 这 时 
应 该 通过 http:/www.json.org/ 的 json2.js 等 方式 来 实现 安全 的 JSON 分 析 。 


国 11.2.7 跨 源 限制 | 


所 谓 跨 源 限制 指 的 是 ， 对 源 不 同 的 通信 进行 限制 。 而 这 里 的 源 指 的 是 由 URL 的 协议 ( http: 或 https: 
等 )、 主 机 名 、 端 口号 所 构成 的 元 素 。 在 Web 领域 ,为 了 确保 安全 性 ， 只 有 同 源 的 通信 才能 被 允许 进行 ， 
这 称 为 同 源 策略 。 
虽然 可 以 在 HTML 中 使 用 iframe 以 实现 在 一 个 页 面 中 同时 显示 来 自 不 同 域 的 文档 ， 不 过 JavaScript 
仍然 只 能 访问 同一 个 源 的 文档 。 如 果 文 档 的 URL 和 iframe 的 不 同 ， 则 无 法 通过 文档 中 所 包含 的 
JavaScript 对 iframe 内 的 DOM 进行 操作 ， 而 iframe 内 的 JavaScript 也 无 法 操作 文档 中 的 DOM。 如 果 不 
这 样 ， 就 会 发 生 诸 如 不 同 域 的 Cookie 能 够 相互 访问 等 安全 问题 。 

对 于 XMLHttpRequest 来 说 ， 同 源 策略 的 含义 是 ， 一 个 XMLHttpRequest 对 象 只 能 发 送 至 一 个 特定 的 
服务 器 ， 即 提供 了 使 用 该 XMLHttpRequest 对 象 的 文档 的 下 载 的 那个 服务 器 。 不 过 ， 只 要 让 服务 右 转 发 
该 请 求 ， 就 能 够 将 请 求 发 送 至 不 同 域 的 服务 器 。 


辆 11.2.8 跨 源 通 信 | 


跨 源 通信 指 的 是 在 不 同 的 源 之 间 收 发 请 求 。 但 是 ， 由 于 前 面 所 说 的 同 源 策略 的 存在 ， 一 般 情况 下 是 
无 法 通过 XMLHttpRequest 向 不 同 的 源 发 送 请 求 的 。 既 可 以 通过 服务 器 转发 或 Flash 来 实现 跨 源 请 求 的 发 
送 ， 也 可 以 通过 JavaScript 实现 跨 源 通信 。 

有 时 还 会 使 用 跨 域 通信 这 一 术语 ， 它 的 意义 和 跨 源 通信 类 似 。 前 面 提 到 过 ， 所 谓 源 ， 是 一 种 由 协议 、 
域 、 端 口号 组 成 的 元 素 。 因 此 ， 可 以 说 跨 域 通 信 是 跨 源 通信 的 一 个 子 集 。 

以 下 这 些 方 法 都 能 够 实现 在 JavaScript 中 的 跨 源 通信 。 

@ JSONP 

@ iframe 攻击 ( iframe hack ) 

@ window.postMessage() 

@@ XMLHttpRequest level 2 


接 下 来 我 们 将 对 它们 进行 说 明 。 























































































































































































































国 11.2.9 JsoNP | 


虽然 无 法 通过 XMLHttpRequest 进行 跨 源 通信 ， 但 是 可 以 将 script 标签 的 src 属性 指定 为 其 他 域 中 
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的 JavaScript 文件 并 将 其 载 人 。 如 果 在 此 处 动态 地 创建 script 标签 的 话 ， 就 和 ee 
态 读 取 。 不 过 ， 如 果 仅 仅 是 取得 了 数据 ， 还 无 法 在 客户 端 使 用 。 因 此 产生 了 JSONP 这 一 概念 。 这 
MochiKit 这 一 JavaScript 库 的 作者 Bob Ippolito 提出 的 "。 
JSONP 是 JSON with Padding 的 简称 。 这 里 的 Padding 指 的 是 向 JSON 数据 中 添加 函数 名 。 
此 时 ， 服 务 器 会 像 下 面 这 样 对 数据 添加 函数 名 之 后 将 其 返回 。 




















callback ({ 
foov: TITLES 18 foo, 
parmee Thio Le Dard, 
ya ms say 


by 

当 客 户 端 对 其 求 值 时 ， 如 果 在 客户 端 侧 对 该 函数 进行 了 定义 (在 上 面 的 例子 中 ， 指 的 是 callback 的 
函数 )， 就 能 够 执行 这 个 函数 。 也 就 是 说 ，JSONP 的 思想 是 不 但 能 从 服务 器 处 获取 数据 ， 而 且 还 能 将 这 
些 数据 作为 函数 的 参数 使 用 。 这 种 方式 能 够 实现 ja 的 跨 源 通信 ， 因 而 被 用 于 各 种 网 页 之 中 。 

代码 清单 11.16 是 一 个 JSONP 的 使 用 示例 。 


| 代码 清单 11.16 ”JSONP 的 使 用 示例 


<script> 
iumelt lon toolsom 


( 
} // 使 用 json 数据 进行 一 些 操作 


function loadData() { 
Var elem = document .createElement ('script'); 
// 将 foo 指定 为 所 要 执行 的 回调 函数 
// 在 使 用 JSONP 的 API 中， 常常 可 以 对 callback 函数 的 名 称 进行 指定 
elem.src = 'http://api.example.com/some-datag&callback=foo'; 
// 将 script 标签 添加 至 head 中 
// 这 时 DOM 将 被 重建 ， 并 载 入 script 标签 的 src 的 内 容 
// 载 入 之 后 就 会 执行 foo 函数 
document .getElementByTagName ('head') [0] .append (elem); 

















































































































emi 


JSONP 存在 的 一 个 问题 是 它 无 法 在 POST 请 求 类 型 中 使 用 。 这 时 只 能 够 做 到 动态 创建 script 标签 并 读 
取 数 据 ， 而 无 法 从 客户 端 发 出 数据 。 如 果 想 让 客户 端 以 POST 的 形式 发 送 跨 源 数据 ， 则 必须 通过 其 他 手段 。 























围 | 11.2.10 iframe 攻击 ( iframe hack ) | 


通过 iframe le 些 复杂 ， 需 要 用 到 下 面 一 些 概念 。 插 号 内 表示 的 是 各 自 所 
属 的 域 。 其 中 ， 面 与 孙 iframe 必须 是 相同 的 域 。 由 于 存在 同 源 策略 ， 因 此 无 法 对 不 同 域 的 iframe 内 
的 DOM et 也 无 法 在 一 个 iframe 中 对 其 父 节 点 的 DOM 元 素 进 行 操作 。 不 过 ， 如 果 父 页 面 
与 iframe 的 源 相同 的 话 ， 则 可 以 相互 对 对 方 的 DOM 进行 操作 (图 11.2 )。 


@ 父 页 面 ( my.example.com ) 





































































































@ 子 iframe (other.example.com ) 
® 孙 iframe ( my.example.com ) 





QD nhttp://bob.pythonmac.org/archives/2005/12/05/remote—json—jsonp/ 
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| 图 11.2 通过 rame 攻击 实现 跨 源 通信 





‘ my.example.com ,other.example.com bs 
1 


‘ 



















子 iframe 


EEC 页面 














子 页 面 ( API ) 





孙 iframe 
孙 页 面 # 结果 





孙 页 面 
<script> 
执行 父 页 面 的 函数 

对 父 页 面 的 DOM 进行 操作 
<script> 


























国 API 请 求 

首先 ， 在 my.example.com 的 页 面 中 将 会 指定 一 个 otherexample.com 中 的 html 来 创建 一 个 过 ame。 这 里 
的 关键 点 在 于 URL 中 包含 了 哈 希 片段 。 哈 希 片 段 被 指定 为 了 进行 API 调用 时 所 需 的 数据 。 
国 响应 

在 otherexample.com 的 页 面 中 ， 将 会 通过 使 用 XMLHttpRequest 之 类 的 方式 调用 otherexample. 
com 中 的 功能 并 获取 数据 。 这 时 还 没有 进行 跨 源 的 功能 调用 ， 必 须 在 取得 数据 后 再 将 它们 传 回 之 前 
的 my.example.com 中 的 页 面 。 为 此 ， 需 要 在 otherexample.com 的 页 面 内 创建 一 个 iframe， 并 将 其 指向 
my.example.com 中 的 页 面 。 即 孙 iiame。 这 一 孙 iframe 的 URL 也 要 被 指定 为 哈 希 片段 。 和 在 父 页 面 中 创 
建 的 指向 otherexample.com 的 子 iframe 一 样 ， 数 据 将 被 置 于 哈 希 片段 之 中 。 
国 回调 函数 

由 于 孙 iframe 与 父 页 面 都 是 my.example.com 中 的 页 面 ， 因 此 可 以 在 孙 iframe 中 执行 父 页 面 中 的 函 
数 。 这 时 ， 孙 iframe 的 onload 将 会 调用 父 页面 的 函数 ， 从 而 实现 callback 的 调用 。 当 然 了 ， 在 调用 函数 
时 所 使 用 的 参数 是 从 子 iframe 传 来 的 location.hash 的 值 。 至 于 子 iframe 将 会 调用 哪 一 个 页 面 ， 则 是 在 创 
建 子 iframe 时 通过 哈 希 片段 来 指定 的 。 只 要 在 创建 时 将 所 指定 的 这 一 页 面 置 于 子 iframe 内 即 可 。 如 此 一 
来 ， 从 父 页 面 的 角度 来 看 ， 就 实现 了 与 跨 源 通信 相同 的 执行 结果 。 

代码 清单 11.17 ~~ 11.19 是 以 上 内 容 的 范例 代码 。 


| 代码 清单 11.17 ”通过 iframe 实现 跨 源 通信 ( 父 页 面 ) 







































































<html> 
<head> 
<EitJeS 父 由 而 </titles 
Ealesllole DS 


// 在 跨 源 通信 中 用 于 获取 数据 的 函数 
function getData() { 
// 此 处 子 iframe 的 URL 为 other.example.com 的 页 面 
// 参数 则 是 在 # 之 后 的 数据 


frames [0] .location.href = 
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'http://other.example.com/api.html#' + 
ONY 冤 
// 这 里 是 事实 上 希望 执行 的 API 
'"api": "http://other.example.com/some-data",' + 
// 在 子 iframe 中 指定 的 孙 iframe 的 URL 
mealloack"u: "necp//my example com/callback En 








人 
} 


// 在 跨 源 通信 中 作为 
// 由 孙 iframe 调用 
function callback (param) { 

document .getElementById ("result") .innerHTML = param; 





口 





调 函数 被 执行 的 函数 























frames[0] .frames [0] .location.href = 'dummy.gif'; 
} 
</script> 
</head> 
<body> 


<input type="button" value=“ 从 other.example.com 获取 数据 ”onclick="getData()"> 
<div id="result"></div> 
<iframe id="child-frame" src="dummy .gif" style="display: none;"></iframe> 
</body> 
</html> 


| 代码 清单 11.18 ”通过 iframe 实现 跨 源 通信 ( 子 iframe ) 


<html> 
<head> 
tntles fr tramee /Cleles 
<SCripe> 
function executeApi() { 
// 将 location.hash 的 第 一 个 字符 (#) 去 除 ， 将 剩余 部 分 以 JSON 格式 进行 分 析 
Var param = JSON.parse (location.hash.substring(1)); 
var xhr = new XHMHttpRequest () ; 
xhr.onreadystatechange = function() { 
if (xhr.readyState == 4 && xhr.status == 200) { 
Var iframe = document .getElementById('grandchild-iframe'); 
iframe.location.href = param.callback + '#' + xhr.responseText; 
} 
)8 
xhr.open (param.api, 'GET'); 
xhr.send (null); 
} 
</script> 
</head> 


<body onload='executeApi()'> 
<iframe id="grandchild-iframe" src="dummy.gif" style="display: none;"></iframe> 
</body> 
</html> 


| 代码 清单 11.19 ”通过 iframe 实现 跨 源 通信 ( 孙 iframe ) 























<html> 
<head> 
el /eam 
<script> 
window.onload = function() { 
window.top.callback (location.hash); 
} 
</script> 
</head> 
<body></body> 
</html> 
尽管 通过 iframe 实现 的 跨 源 通信 比较 复杂 ,但 却 具 有 在 Internet Explorer 中 也 能 够 正常 工作 的 优点 ， 
而 且 也 比 通过 JSONP 实现 的 方式 更 为 安全 。JSONP 方式 是 无 法 对 服务 顺 端 含有 恶意 代码 的 情况 进行 防范 的 ， 
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而 对 于 通过 进 ame 的 实现 方式 ， 由 于 只 能 由 同一 个 域 中 的 孙 iframe 对 父 页 面 进行 操作 ， 因 此 会 更 加 安全 





国 11.2.11 window.postMessage | 


可 以 通过 在 HTMLS5 中 定义 的 window.postMessage 来 实现 安全 的 跨 源 通信 ( 代码 清单 11.20、 代 码 清 
单 11.21 )。 


有 代码 清单 11.20 通过 postMessage 实现 跨 源 通信 


<html> 
<head> 
<title> 父 页面 </title> 
有 SC 三 
// 在 跨 源 通信 中 用 于 获取 数据 的 函数 
function getData() { 
// 对 子 iframe 进行 postMessage 操作 
frames[0] .postMessage('http://other.example.com/some-data', 
'http://other.example.com'); 


】 
// 在 跨 源 通 信 中 作为 回调 函数 被 执行 的 函数 
// 被 设 定 为 用 于 接收 来 自 子 iframe 的 消息 


父 页 面 ) 





















































window.addEventListener('message', function(event) { 
if (event.origin !== 'http://other.example.com') { 
return; 


} 
// 将 结果 保存 于 event .data 中 
document .getElementById ("result") .innerHTML = event .data; 
}, false); 
Wen 
</head> 
<body> 
<input type="button" value=“ 从 other.exampble.conm 效 取 数据 ”onclick="getData()"> 
<div id="result"></divs 
// 将 other.example .com 的 页 面 指定 为 子 iframe 的 URL 
<iframe id="child-frame" src="http://other.example.com/api.html" 
style="display: none;"></iframe> 




















</body> 
</html> 


| 代码 清单 11.21 ”通过 postMessage 实现 跨 源 通信 ( 子 iframe ) 














<html> 
<head> 
ETEleS TT franes/titles 
Se 
window.addEventListener('message', function(event) { 
if (event.origin !== 'my.example.com') { 
return; 
' 
var xhr = new XHMHttpRequest (); 
xhr.onreadystatechange = function() { 
Tn read estat en tatus = 20 
// 将 responseText 作为 消息 返 区 
event .source .postMessage (xhr .responseText, 'http://my.example.com'); 
} 
he 
Var url = event .data; 
Shove pn. 
xhr.send (null); 
}, false); 
</script> 
</head> 
<body></body> 
</html> 
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国 11.2.12 XMLHttpRedquest Level 2 | 


之 前 提 到 过 ,XMLHttpRequest 无 法 用 于 
XMLHttpRequest Level 2 中 ， 新 增 了 一 些 功 























跨 源 通信 。 不 过 ， 这 只 是 对 于 Level 1 而 言 的 。 在 

















能 以 实现 对 跨 源 通信 的 支持 。 不 过 ， 要 进行 跨 源 通信 就 必须 





得 到 服务 器 端的 许可 。 所 以 必须 在 响应 中 包含 Access-Control-Allow-Origin 这 一 HTTP 头 部 ， 以 指定 可 以 
访问 的 源 。 如 果 Access-Control-Allow-Origin 这 一 头 部 的 值 被 指定 为 了 "*" 的 话 ， 则 表示 人 允许 来 自任 意 源 


的 访问 。 














在 通过 XMLHttpRequest 进行 跨 源 通信 时 ， 默 认为 不 发 送 Cookie。 如 果 要 发 送 Cookie， 则 必须 将 
withCredentials 属性 设置 为 true (代码 清单 11.22 )。 








| 代码 清单 11.22 。 XMLHttpRequest Level 2 


var xhr = new XMLHttpRequest (); 
xhr.open('GET', 'http://other.example.com', true); 


xhr.withCredentials = true; 





xhr.onreadystatechange = function() { 














， // 进行 一 些 操作 


xhr.send();，; 


加 11.2.13 跨 源 通 信 
通过 跨 源 通信 在 不 同 的 域 





的 安全 问题 
Ph 获取 数据 的 做 法 





// 设 定 为 将 会 发 送 Cookie 


已 经 被 认为 是 理 所 应 当 的 了 ,得 到 了 广泛 的 使 用 。 然 而 ， 








由 同 源 策略 的 制定 而 不 难 想到 ， 在 不 同 的 域 之 间 进 行 通信 是 存在 安全 风险 的 。 需 要 对 此 时 刻 牢记 。 





应 该 只 与 可 以 信赖 的 域 进行 








了 通信 自 











不 必 说 ， 男 外 ， 一 个 域 即使 在 过 去 是 安全 的 ， 也 不 能 保证 它 永远 就 








会 是 安全 的 。 如 果 所 要 搭建 的 Web 站 点 将 会 对 个 人 信息 进行 处 理 ， 则 更 应 该 对 安全 性 加 以 高 度 的 重视 。 








| 11.3 表单 


























表单 主要 被 用 于 用 户 注册 等 























些 需要 将 数据 发 送 给 服务 器 以 执行 注册 操作 的 处 理 之 中 。 在 用 户 注册 





这 样 的 需要 将 各 种 信息 〈 用 户 耳 、 密 码 、 邮 件 地 址 等 ) 汇总 发 送 至 服务 器 的 处 理 中 ， 表 单 是 一 种 简单 而 











正确 的 HTML 实现 方法 。 























不 过 ， 在 使 用 表单 时 也 会 有 一 些 限制 。 为 了 避免 这 些 问 题 ， 在 有 些 情况 下 不 会 选择 使 用 表单 。 





表单 最 大 的 不 足 就 是 在 submit 时 会 发 生 页 
































还 有 必要 使 用 表单 倒是 一 个 
的 并 不 是 表单 。 这 一 过 程 中 


浊 双 未 



































看 跳 转 。 而 AJAX 却 是 一 种 不 进行 页 面 跳 转 ， 直 接 改 写 页 




















面 内 容 的 技术 。 表 单 在 submit 时 一 定 会 发 生 页 面 跳 转 ， 因 此 在 这 一 点 上 它 是 与 AJAX 的 理念 相悖 的 。 在 


面 将 会 说 到 ， 其 实 还 是 有 办 法 让 表单 在 submit 时 不 发 生 页 面 跳 转 的 。 不 过 在 使 用 这 种 方法 之 后 ， 是 





























问题 。 我 们 来 仔细 考虑 一 下 吧 。 例 如 ， 在 Twitter 中 发 送 新 的 推 特 状态 时 

















仅仅 是 通过 XMLHttpRequest 来 进行 了 数据 的 发 送 而 已 。 











得 益 于 AJAX， 出 现 了 不 使 用 表单 就 能 与 服务 器 进行 数据 收发 的 方式 。 不 过 这 也 并 不 表示 表单 将 会 


























~ 








肖 失 。 在 这 里 ， 我 们 将 说 明 一 下 通过 使 ) 























发 送 数 据 ， 其 目的 是 实现 更 为 用 











园 11.3.1 表单 元 素 


表单 元 素 具 有 HTMLFormElement 这 一 继承 于 

















接口 所 定义 的 





eal 


竹 。 




















j JavaScript 来 发 挥 表单 功能 的 方法 。 这 并 不 仅仅 是 为 了 向 服务 器 
户 友好 的 表单 功能 。 


HTMLElement 的 接口 。 表 11.3 总 结 了 HTMLFormElement 
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表 11.3 HTMLFormElement 的 属性 


























































































































属性 名 说 明 

elements form 内 的 input 元 素 一 览 

length form 内 的 input 元 素 的 数量 

name form 的 名 称 。JavaScript 可 通过 它 引 用 表单 

acceptCharset form 所 支持 的 字符 集 

action form 的 action 元 素 

enctype form 的 content type 

method 在 发 送 数据 时 所 用 的 HTTP 类 型 

target action 结果 的 写 入 目标 

submit() 发 送 数 据 

reset() 将 form 还 原 至 初始 化 状态 

在 向 服务 器 POST 数据 时 ， 可 以 通过 acceptCharset 、action 、enctype 与 method 来 设 定 元 信息 。 这 些 

值 都 是 能 够 被 改写 的 。 因 此 ， 我 们 甚至 能 够 根据 不 同 的 按键 操作 而 向 其 他 URL 发 送 请 求 。 


elements 是 对 表单 内 的 控件 的 引用 。 之 后 将 会 对 表单 控件 进行 详细 说 明 。 各 个 表单 控件 














将 

















在 HTML 中 的 书写 顺序 被 引用 。 此 外 还 能 够 通过 document.forms 对 表单 元 素 进 行 引 用 。 这 利 
与 它们 在 HTML 中 的 书写 顺序 相 一 致 ( 代码 清单 11.23 )。 


| 代码 清单 11.23 ”表单 的 引用 




















<body> 
<form> 
= te Werey> 
<1mout Eve asswordu> 
<input type="email"><!-- 希望 获取 该 元 素 的 值 --> 
</form> 
<script> 
Var email = document .forms [0] .elements [2] .value; 
alert (email); 
Sel 
</body> 








3 引 


按照 它们 
] 同 样 会 

















人 然而， 在 处 理 表单 时 会 受到 HTML 中 元 素 书写 顺序 的 影响 ， 这 并 不 是 什么 好 事 。 即 使 只 是 对 HTML 























的 书写 进行 小 幅 修改 ， 也 有 可 能 导致 程序 无 法 正常 运行 。 为 此 ， ， <form> 标签 或 <input> 标签 中 




















的 name 属性 ， 通 过 这 一 name 属性 的 值 来 引用 元 素 。 这 样 一 来 ， 只 要 这 些 名 称 不 发 生变 化 ， 脚 本 的 功能 




















就 不 会 受到 影响 (代码 清单 11.24 )。 
有 代码 清单 11.24 通过 名 称 引用 表单 


<form name="user"> 
<input name="username" type="text"> 
<input name="password" type="password"> 
<input name="email" type="email"><!-- 和 希望 获取 该 元 素 的 值 --> 
</form> 
entloleS 
Var email = document .user.email.value; 
alert (email); 
ET 


submit( 方法 被 执行 后 的 效果 与 按 下 submit 键 的 效果 一 样 ， 





tk 








都 将 会 向 服务 器 发 送 数据 。 不 过 ， 它 与 


按 下 submit 键 时 不 同 的 是 ，submit 事件 不 会 被 触发 。 于 是 ，onsubmit 事件 处 理 程序 也 不 会 被 执行 。reset() 





方法 与 reset 键 在 这 一 点 上 也 是 如 此 。 只 有 在 按 下 reset 键 时 onreset 事件 处 理 程序 才 会 被 执行 

















调用 reset0 方法 则 不 会 执行 。 

















， 而 如 果 是 


如 果 onsubmit 事件 处 理 程序 返回 了 false 的 话 ， 表 单 的 数据 就 不 会 被 发 送 至 服务 器 。 之 后 ， 本 章 还 将 
对 “内 容 验 证 ”进行 说 明 。 只 要 在 onsubmit 事件 处 理 程序 中 执行 对 内 容 的 验证 ， ee 
返回 false， 就 能 够 避免 发 送 没 有 意义 的 数据 。 同 样 地 ， 如 果 onreset 事件 处 理 程 序 返回 了 false， 则 表单 将 
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不 会 


冯 11.3.2 表单 控件 | 


在 表单 中 用 于 接收 输入 信息 的 元 素 称 为 表单 控件 。 常 用 的 表单 控件 有 input 元 素 、select 元 素 、button 
元 素 与 textarea 元 素 等 。 一 方面 这 些 元 素 都 具有 不 同 的 接口 ， 但 另 一 方面 他 们 都 包含 一 些 通用 的 属性 。 表 
11.4 总 结 了 这 些 表单 控件 中 的 通用 属性 。 


表 11.4 表单 控件 的 通用 属性 


[hll 
PN 


种: 










































































































































































属性 说 明 

orm 该 控件 所 属 的 表单 元 素 

disabled 控件 是 否 被 禁 

name 控件 的 名 称 

ype 控件 的 

value 控件 的 值 

ocus() 使 控件 获得 焦点 ( *1 ) 

blur() 使 控件 失去 焦点 (*1 ) 
*1 在 button 元 素 中 不 含 这 一 属性 











如 果 disable 属性 的 值 为 tue， 该 表单 控件 就 会 被 禁用 ， 无 法 进行 输入 操作 。 通 过 对 disable 属性 设置 
































恰当 的 值 ， 就 能 够 控制 输入 ， 实 现 例如 仅 能 够 在 满足 了 特定 的 条 件 时 输入 这 样 的 效果 。 

通过 以 JavaScript 调用 focus(0) 方法 与 blur0) 方法 ， 可 以 使 特定 的 元 素 获 得 或 失去 焦点 。 与 submitO 和 
reset() 方法 不 同 的 是 ， 在 执行 这 些 方法 的 时 候 将 会 分 别 触发 focus 事件 与 blur 事件 。 
国 11.3.3 内 容 验证 | 


图 内 容 验证 的 必要 性 

在 输入 时 ， 对 于 必须 输入 的 项 目 是 否 已 经 填 人 了 所 需 的 值 ， 或 者 是 否 超过 了 人 允许 输入 的 文字 数量 等 
情况 ， 我 们 常常 会 通过 JavaScript 来 检查 。 虽 说 最 终 自 然 还 是 应 该 由 服务 器 端 对 其 检查 ， 不 过 在 客户 端 也 
需要 执行 检查 工作 。 这 样 做 有 很 多 好 处 。 
首先 想到 的 一 个 好 处 是 ， 由 于 在 客户 端 就 完成 了 检查 工作 ， 在 与 服务 器 通信 过 程 中 的 时 间 损失 将 会 消 
宗 。 与 将 数据 发 送 给 服务 器 ， 由 服务 器 对 数据 进行 检查 ， 并 在 收 到 服务 器 返回 的 数据 出 错 的 响应 之 后 再 进 
画面 绘制 的 方式 相 比 ， 在 客户 端 检查 数据 以 判断 是 否 正确 并 绘制 画面 的 方式 性 能 更 好 。 
此 外 ， 这 种 做 法 可 以 避免 向 服务 器 发 送 明显 有 误 的 数据 ， 从 而 减轻 了 服务 器 的 处 理 量 。 

不 过 ， 不 能 忘记 最 后 应 该 由 服务 器 端 检查 数据 。 这 是 由 于 JavaScript 是 在 客户 端 执行 操作 的 ， 可 以 对 
数据 进行 各 种 各 样 的 改写 ， 仅 靠 这 种 方式 并 不 能 确保 数据 的 完整 性 。 
图 进行 内 容 验证 的 时 机 

有 多 次 进行 内 容 验 证 的 时 机 。 其 中 之 一 自然 是 在 按 下 submit 键 时 验证 。 在 按 下 了 submit 键 之 后 ， 检 查 
整个 form 内 所 有 的 元 素 的 值 ， 如 果 发 现 了 不 合法 的 数据 ， 则 返回 false， 并 取消 数据 的 发 送 。 

或 者 也 可 以 在 数据 输入 之 后 立即 检查 该 数据 。 如 果 对 能 够 输入 的 字符 数 进 行 了 限制 ， 则 可 以 在 输入 
时 逐一 对 字符 计数 ， 如 果 字 符 数 超过 了 限制 ， 则 改变 背景 色 以 向 用 户 提供 反馈 。 或 者 在 答 入 用 户 ID 等 不 
人 允许 重复 的 数据 时 ， 在 输入 后 与 服务 器 进行 通信 ， 检 查访 用 户 ID 是 否 已 经 存在 。 

这 一 类 的 检查 时 的 做 法 与 其 他 的 JavaScript 处 理 并 没有 太 大 的 区 别 。 只 需要 将 事件 与 处 理 相关 联 ， 并 
反馈 处 理 结果 即 可 。input 元 素 可 以 触发 各 种 各 样 的 事件 ， 因 而 可 以 实现 周密 的 行为 控制 。 
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国 11.3.4 可 用 于 验证 的 事件 l 
国 submit 

在 使 用 表单 时 最 为 重要 的 一 个 事件 就 是 submit 事件 。 不 过 正如 之 前 所 讲 ， 在 调用 submit 方法 时 并 
不 会 触发 该 事件 。 

仅 通过 submit 事件 的 事件 处 理 程序 就 能 够 取消 表单 的 发 送 操作 。 此 外 ， 由 于 这 是 最 后 一 个 能 够 进行 














内 容 验证 的 事件 ， 因 此 即使 已 经 在 之 前 通过 各 元 素 自 吴 的 事件 对 内 容 进 行 了 验证 ， 也 可 以 在 submit 事件 
被 触发 时 再 一 次 检查 所 有 元 素 。 
转 focus、blur 

input 元 素 在 获取 了 焦点 时 将 会 触发 focus 事件 。 而 当 其 失去 焦点 时 ， 则 将 触发 blur 事件 。 

在 focus 事件 被 触发 后 ， 通 过 更 改 input 元 素 的 背景 色 等 视觉 上 的 方式 ， 帮 助 用 户 了 解 正 在 对 哪 一 个 
input 进行 操作 ， 是 一 种 不 错 的 做 法 。 而 对 于 blur 事件 来 说 ， 则 可 以 反 过 来 执行 将 背景 色 还 原 的 操作 。 不 
过 在 最 近 的 浏览 器 中 ， 有 很 多 都 会 对 正 处 于 焦点 的 元 素 进行 强调 显示 ， 所 以 也 不 是 非 要 进行 这 样 的 处 理 。 

可 以 认为 元 素 在 触发 了 blur 事件 时 相应 的 输入 已 经 完成 ， 所 以 在 这 时 验证 内 容 也 是 一 种 妥当 的 选择 。 
不 过 在 这 种 情况 下 ， 焦 点 已 经 转移 至 了 下 一 个 输入 元 素 ， 所 以 应 该 怎样 提供 反馈 以 增强 用 户 体 验 是 一 个 
问题 。 






























































转 change 

在 input 元 素 的 值 发 生变 化 时 该 事件 将 被 触发 。 虽 然 文本 框 也 对 这 一 事件 提供 了 支持 ， 不 过 它 主 要 还 
是 被 用 于 复 选 框 或 单 选 框 等 用 于 选择 值 择 的 input 元 素 之 中 。 

之 所 以 说 无 法 在 文本 框 中 使 用 该 事件 ， 是 因为 文本 框 中 change 事件 的 触发 时 机 很 难 被 有 效 利用 。 对 
于 文本 框 来 说 ，change 事件 仅 会 在 文本 框 失去 焦点 ， 且 其 value 属性 的 值 与 具有 焦点 时 不 同 的 情况 下 ， 
才 会 被 触发 。 因 此 ， 在 输入 过 程 中 该 事件 不 会 被 触发 。change 事件 本 应 该 是 在 有 字符 输入 而 改变 了 value 
时 被 触发 ， 而 在 文本 框 中 无 法 实现 这 一 效果 ， 故 而 无 法 对 其 使 用 。 
围 keydown、keyup、keypress 

keydown 、keyup 与 keypress 事件 将 在 发 生 键盘 输入 时 被 触发 。 当 有 键 被 按 下 时 将 触发 keydown， 当 
释放 按 下 的 键 时 将 触发 keyup ， 当 有 键 被 按 下 且 输 入 了 字符 时 将 触发 keypress。 不 过 ， 与 键盘 相关 的 事 
件 的 执行 方式 会 根据 浏览 器 以 及 系统 平台 的 不 同 而 有 所 差异 ， 所 以 很 难 对 其 进行 处 理 。 甚 至 ，keydown/ 
keyup 事件 与 keypress 事件 所 取得 的 keyCode/charCode 也 不 相同 。 
国 input 

当 input 元 素 发 生 了 输入 行为 时 将 会 触发 input 事件 。 对 于 文本 框 来 说 ， 每 输入 1 个 字符 都 会 触发 该 
事件 。 而 这 正 是 之 前 期 望 通过 change 事件 所 获得 的 效果 。 不 过 ，input 事件 是 在 HTMLS5 的 标准 中 被 定义 
的 ， 所 以 在 Internet Explorer 8 以 及 更 早 的 版 本 中 不 被 支持 。 

input 事件 与 keypress 事件 等 由 键盘 输入 触发 的 事件 不 同 ， 只 有 在 值 发 生变 化 时 才 会 被 触发 。 也 就 是 
说 ， 即 使 通过 方向 键 改变 了 光标 插入 标记 的 位 置 ， 也 不 会 触发 input 事件 。 此 外 ，keypress 事件 在 通过 退 
格 键 删除 已 输入 的 字符 时 不 会 被 触发 ， 而 与 之 相对 的 ，input 事件 在 进行 删除 时 也 会 被 触发 。 


冯 11.3.5 使 用 表单 而 不 产生 页 面 跳 转 的 方法 | 


在 form 元 素 中 含有 一 个 target 属性 。form 将 会 在 这 一 target 属性 所 指定 的 框架 或 窗口 中 绘制 submit 
结果 的 响应 。 如 果 没 有 指定 target 属性 的 值 ， 则 该 值 默 认 是 自身 所 属 的 框架 或 窗口 ， 这 时 将 会 发 生 页 面 
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跳 转 。 表 11.5 总 结 了 target 属性 可 以 设 定 的 值 。 
表 11.5 form 的 target 属性 
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值 显示 结果 的 位 置 

_blank 新 建 窗 

_Self 当前 框架 ) 

_parent 父 框架 

_top 解除 框架 的 分 割 并 在 整个 窗口 中 显示 


























框架 名 、 窗 口 名 


























所 指定 的 任意 框架 ( 窗 











) 








让 








为 了 防止 页 面 跳 转 的 发 生 ， 可 以 将 target 指定 为 当前 窗口 
有 些 碍 眼 ， 甚 至 可 能 会 被 浏览 器 的 弹 窗 锁 定 功能 所 拦截 。 





iframe 的 宽度 和 高 度 都 设 为 0， 使 其 不 显示 。 

















之 外 的 窗口 。 不 过 打开 新 窗口 的 做 法 会 
因此 应 该 将 target 指定 为 空 的 iframe， 并 将 该 


可 以 让 对 parent 窗口 进行 操作 的 JavaScript 来 对 结果 页 面 进行 处 理 。 这 样 一 来 ， 就 能 够 在 不 发 生 页 面 


跳 转 的 情况 下 利用 form 了 (代码 清单 11.25 )。 
| 代码 清单 11.25 ”使 用 了 表单 的 通信 


<script> 


// 该 函数 将 被 submit 了 form 的 结果 页 面 进行 调用 


function onComplete() { 
alert ('complete.'); 
} 


/Ser 
<!1-- 将 名 为 result 的 frame 指定 为 发 送 结 果 的 写 入 
<form target="result" action="register"> 
<input type="text"> 
<input type="submit" value="post"> 
</form> 


<!-- 写 入 发 送 结果 的 ijframe --> 





目标 --> 





<iframe name="result" style="width: 0; height: 0; 


<!-- 结果 页 面 --> 
<!DOCTYPE HTML> 
<=hEmll eng zh NL 
<head> 
<meta charset="UTF-8"> 
<script> 
// 执行 parent 窗口 的 onComplete 函数 
parent .onComplete () ; 
</script> 
</head> 
<body> 
</body> 
</html> 





border: none;"></iframe> 


不 过 ， 无 法 否认 的 是 ， 使 用 这 样 的 方式 还 是 会 有 种 破解 页 面 的 感觉 。 


图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 





@@ 224 一 一 一 第 3 部 分 客户 端 JavaScript 





使 用 了 库 ， 就 可 以 不 必 书 写 那 些 处 理 约定 俗 成 的 代码 ， 也 不 用 考虑 跨 浏览 器 支持 等 烦 杂 内 容 ， 
从 而 能 够 简单 地 实现 这 些 功能 。 本 章 将 以 因 链 式 语法 及 插件 系统 而 广 受 好 评 的 jQuery 为 中 心 ， 
讲解 库 的 使 用 方法 。 


| 12.1 | 使 用 库 的 原因 


在 客户 端 JavaScript 中 ， 最 为 费时 费力 的 事 就 是 跨 浏览 器 支持 ， 更 进一步 说 ， 是 对 Internet Explorer 
的 支持 。Internet Explorer 6、7、8 之 间 都 有 着 细微 的 功能 差异 ， 而 且 从 浏览 器 市 场 份额 的 角度 来 看 ， 这 
真是 一 个 不 可 忽视 的 麻烦 问题 。 当 然 了 ,很 多 大 型 网 站 已 经 不 再 支持 Internet Explorer 6， 所 以 忽略 它 可 
能 也 不 会 有 什么 问题 。 例 如 ，Yahoo! JAPAN 已 经 不 支持 Internet Explorer 6，Google 则 将 Google Apps 所 
支持 的 浏览 器 限定 为 最 新 版 的 Google Chrome 、Firefox 、Safari 、Internet Explorer 及 其 上 一 个 版 本 。 
然而 ， 即 使 不 考虑 Internet Explorer 6， 仍 然 无 法 逃脱 Internet Explorer 的 束缚 。 要 让 每 一 个 开发 者 各 
自 解决 这 一 问题 是 不 可 行 的 ， 应 该 通过 已 经 被 很 多 网 站 所 使 用 的 库 来 尽 可 能 地 减少 花费 在 跨 浏 览 器 支持 
上 的 时 间 与 精力 。 话 虽 如 此 ， 库 也 不 是 完美 无 缺 的 。 对 于 库 无 法 涵盖 的 部 分 ， 仍 需要 自己 书写 跨 浏览 器 
支持 的 代码 。 在 充分 使 用 了 库 的 基础 上 ， 理 解 浏 览 絮 的 功能 ， 在 不 得 已 的 情况 下 自己 写 出 相应 的 处 理 ， 
这 一 点 很 重要 。 

如 果 要 开发 真正 的 Web 应 用 ， 就 必定 需要 使 用 库 。 不 过 ， 如 果 仅 仅 知 道 库 的 使 用 方法 ， 发 生 问题 时 
还 是 无 法 解决 。 因 此 ， 至 少 还 应 该 掌握 之 前 所 说 的 那些 知识 ， 并 在 此 基础 上 ， 理 解 使 用 库 所 能 带 来 的 优 
点 并 对 其 恰当 地 加 以 利用 。 


WW ouery 的 和 OO 


jQuery 是 现在 世界 上 使 用 最 多 的 JavaScript 库 ， 其 作者 为 John Resig， 可 以 通过 下 面 的 URL 访问 
jQuery 的 官方 站 点 。 在 执笔 本 书 时 的 最 新 版 为 1.6.2。jQuery 是 通过 MIT 许可 进行 发 布 的 。 
http://jquery.com/ 
jQuery 具有 以 下 特征 。 
@ 压缩 后 仅 有 31KB， 非 常 轻巧 
@ 通过 链 式 语法 实现 
@ 通过 CSS3 选择 器 及 自 定义 选择 器 获取 元 素 
@ 支持 插件 ， 可 扩展 性 高 
jQuery 并 不 包含 UI 组 件 。jQuery 男 有 一 个 独立 的 UI 组 件 ， 名 为 jQuery UI。jQuery UI 的 官方 站 点 
如 下 所 示 。 在 本 书 中 将 会 对 jQuery 进行 说 明 ， 而 不 会 涉及 jQuery UI。 只 需要 了 解 jQuery， 就 足以 能 掌握 
jQuery 的 基本 使 用 方法 了 。 
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http://jqueryui.com/ 


12.3 | jQuery 的 基本 概念 


上 12.3.1 使 用 实例 | 


在 使 用 jQuery 时 ， 由 于 其 采用 了 自 定义 的 选择 器 以 及 链 式 语法 ， 因 此 看 起 来 像 是 在 书写 不 同 于 
JavaScript 的 男 一 种 语言 。 例 如 ， 点 击 foo 类 中 的 第 一 个 div 元 素 时 ， 创 建 一 个 链接 并 将 其 添加 的 操作 ， 
可 以 像 代码 清单 12.1 这 样 来 书写 。 


| 代码 清单 12.1 jQuery 的 使 用 实例 


<button class='foo'> 当 点 击 该 按钮 时 ， 添 加 一 个 链接 </button> 
<button class='foo'> 该 按钮 不 会 有 反应 </button> 
Scene 

// 对 点 击 class="foo" 的 第 一 个 button 元 素 时 的 处 理 进行 设 定 
人 性 GOEEISRTA 和 































































































SEEGJAwSaEa GE // 创建 div 元 素 。div 元 素 中 a 元 表 这 一 子 元 素 
// 这 时 选择 的 是 div 元 素 
SE naa) WA 对 a 元 素 进行 选择 。 所 选择 的 目标 从 div 元 素 转 为 了 a 元素 
.text ('jQuery .com') // 将 a 元 素 的 文本 设 定 为 jQuery .com 
.attr('href', 'http://jquery.com') // 将 a 元 素 的 href 属性 设 定 为 http://jquery .com 
.end () // 结束 对 a 元 素 的 选择 
// 在 a 元 素 被 选择 之 前 所 选中 的 div 元 素 回 到 了 被 选择 的 状态 
.appendTo ('body'); // 将 div 元 素 添加 至 body 





有 

/Eile 

尽管 上 面 例子 中 的 功能 并 没有 什么 特别 意义 ,不 过 也 能 从 中 看 出 借助 jQuery 就 能 够 实现 简洁 的 书 
写 。 在 某 个 元 素 触 发 了 事件 之 后 对 另 一 个 元 素 进行 操作 是 在 JavaScript 中 常见 的 处 理 ， 而 对 此 jQuery 只 
需要 书写 这 么 一 点 的 代码 就 能 实现 。 完 全 不 需要 使 用 getElementById0 或 firstChild 之 类 的 DOM API。 可 
以 说 jQuery 是 尽 可 能 地 隐藏 了 DOM API 并 对 其 进行 了 重新 定义 。 

作为 比较 ， 在 代码 清单 12.2 中 没有 使 用 jQuery， 而 是 通过 标准 的 JavaScript 与 DOM API 来 实现 上 一 
个 例子 中 的 功能 。 


| 代码 清单 12.2 不 使 用 jQuery 的 例子 


<button class='foo'> 当 该 按钮 被 点 击 时 ， 添 加 一 个 链接 </button> 
<button class='foo'> 该 按钮 不 会 有 反应 </button> 


























































































































<script 
// 在 被 点 击 时 所 进行 的 处 理 
va onel ee con 


var div = document .createElement ('div'); 

Var a = document .createElement ('a'); 

a.appendChild (document .createTextNode('jQuery.com')); 
ashrete ateo meer om 

div.appendChild(a); 

document .body.appendChild (div); 


bs 


// 通过 getElementsByTagName () 来 获取 所 有 的 button 元 素 

varbutteons docoumente. SE ny Den De 

// 在 所 取得 的 button 元 素 中 找到 第 一 个 类 名 包含 了 foo 的 元 素 

// 对 点 击 事件 设 定 事件 侦 听 器 

for (var i = 0; len = buttons.length; i < len; i++) { 

if (buttons[i] .className.match(/(*|\s)foo(\s|$)/)) { 

buttons[i] .addEventListener('click', onClick, false); 
break; 
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} 
} 
/ee 
或 许 仅 仅 是 这 种 程度 的 功能 还 不 至 于 使 书写 变 得 过 于 复杂 ,但 代码 量 几 乎 是 倍增 。 在 使 用 jQuery 时 
无 需 用 到 的 变量 、DOM API、 让 语句 以 及 for 语句 等 控制 语句 的 书写 使 得 代码 量 增加 。 而 变量 与 控制 语句 的 
使 用 也 会 增加 出 现 错误 的 可 能 ， 所 以 如 果 能 够 减少 使 用 的 话 ， 还 是 少 用 一 些 为 好 。 


国 12.3.2 链 式 语法 | 


图 链 式 语法 的 定义 

在 之 前 的 例子 (代码 清单 12.1 ) 中 ， 事 件 侦 听 器 的 描述 其 实 只 用 了 1 行 ， 分 号 只 是 出 现在 最 后 的 
appendTo() 方法 的 结尾 处 而 已 。 在 此 之 前 全 都 是 通过 点 运算 符 将 方法 连接 起 来 的 。 为 什么 能 够 使 用 这 样 
的 书写 方式 呢 ? 

jQuery 对 象 中 的 大 部 分 方法 都 会 返回 一 个 jQuery 对 象 。 因 此 ， 如 果 执 行 了 一 个 返回 jQuery 对 象 的 方 
法 ， 就 能 够 对 所 返回 的 值 再 一 次 执行 能 返回 jQuery 对 象 的 方法 。 以 这 种 方式 将 方法 连 在 一 起 书写 的 方式 
称 为 链 式 语法 。 
图 链 式 语 法 中 的 jQuery 对 象 

需要 注意 的 是 ， 执 行 方法 的 jQuery 对 象 与 方法 所 返回 的 jQuery 对 象 并 不 一 定 总 是 同一 个 对 象 。 有 时 
候 会 在 方法 内 创建 一 个 新 的 jQuery 对 象 并 将 其 返回 。 因 此 ， 如 果 只 是 简单 地 将 链 式 方 法 拆 开 分 行书 写 的 
话 ， 并 不 一 定 能 获得 所 期 望 的 结果 ( 代码 清单 12.3 )。 为 了 使 其 正常 执行 功能 ， 我 们 必须 将 目标 对 象 替 换 
为 恰当 的 jQuery 对 象 ( 代码 清单 12.4 )。 

可 以 通过 在 jQuery 中 更 改 所 返回 的 jQuery 对 象 来 实现 链 式 语 法 中 操作 对 象 的 替换 。 在 执行 find() 方 
法 这 样 的 用 于 对 元 素 进 行 选 择 的 方法 时 ， 可 以 替换 目标 元 素 集 。 而 在 执行 了 end0) 方法 之 后 ， 所 选中 的 元 素 
集 就 会 回 到 之 前 一 次 时 的 状态 。 通 过 使 用 end0 方法 ， 不 但 可 以 将 目标 元 素 集 替 换 为 恰当 的 值 ， 还 能 够 使 链 
式 语 法 连 得 很 长 。 不 过 ， 为 了 准确 地 运用 end0 方法 ， 必 须 对 之 前 的 状态 有 着 清楚 的 了 解 。 和 否则 就 无 法 知道 
end0 方法 的 返回 值 是 以 哪 一 个 元 素 为 目标 的 ， 从 而 无 法 执行 期 望 的 操作 。 以 链 式 语法 连 起 来 书写 的 方式 确 
实 很 方便 ， 不 过 在 书写 时 必须 正确 理解 正在 操作 的 对 象 才 行 。 
| 代码 清单 12.3 没有 使 用 链 式 语法 的 不 正确 的 书写 方式 

// 不 使 用 代码 清单 12 .1 中 的 链 式 语法 来 描述 事件 侦 听 器 

// 仅仅 简单 地 对 已 有 的 对 象 依次 执行 方法 并 不 能 得 到 所 期 望 的 执行 结果 


var elem = $('<div><a></a></div>'); 







































































































































































































































































































































































elem.find('a'); // 对 a 元 素 进 行 选择 并 不 会 将 elem 的 引用 替换 为 a 元 素 
elem.text ('jQuery.com'); // 对 div 元 素 进行 的 操作 
elem.attr('href','http://jquery.com'); // 对 div 元 素 进 行 的 操作 。 无 法 生成 链接 

















elem.end (); 
elem.appendTo('body'); 


| 代码 清单 12.4 “没有 使 用 链 式 语法 的 正确 的 书写 方式 


// 不 使 用 代码 清单 12 .1 中 的 链 式 语法 来 描述 事件 侦 听 器 

// 由 于 同时 以 div 与 a 这 两 个 元 素 为 目标 进行 处 理 ， 因 此 执行 结果 与 所 期 待 的 一 臻 
var div = $('<div><a></a></div>')，; 

var a SS div Fanad( lan). 
a.text ('jQuery.com'); 

eat en (er ee /er om 

// 如 果 没 有 使 用 链 式 语法 ，a .end () 就 没有 意义 了 ， 所 以 不 需要 写 出 
div.appendTo('body'); 
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专栏 

链 式 语法 的 缺点 

JavaScript 的 主要 功能 之 一 为 对 DOM 树 中 的 元 素 进行 选取 与 操作 。 在 使 用 了 jQuery 之 后 ， 就 能 以 非常 
简洁 的 书写 方式 实现 对 这 一 系列 的 处 理 的 表述 。 不 过 ， 这 种 方便 的 链 式 语法 也 有 其 缺点 。 它 存在 调试 时 无 法 
对 其 设 定 断 点 的 问题 。 
开发 者 无 法 在 链 式 语法 连接 起 来 的 代码 段 中 的 特定 位 置 设 定 断 点 。 如 果 所 写 的 代码 没有 复杂 到 不 得 不 在 
调试 时 设 定 断 点 才能 跟踪 处 理 过 程 的 话 倒 还 好 ， 但 万 一 特别 复杂 的 话 ， 情 况 就 会 变 得 很 麻烦 。 不 过 ， 最 近 出 
现 了 一 些 进化 幅度 令 人 惊讶 的 JavaScript 调试 器 ， 如 有 可 能 ， 希 望 大 家 能 尝试 使 用 一 下 。 
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| 12.4 | $ 函数 


通过 前 面 的 例子 我 们 可 以 知道 ， 在 jQuery 中 $ 函数 (jQuery 函数 ) 根据 参数 的 不 同 可 以 执行 各 种 操 
作 。jQuery 的 $ 函数 将 会 根据 当前 的 上 下 文 语 境 选 择 最 合适 的 操作 。 下 面 总 结 了 $ 函数 的 功能 。 


国 12.4.1 抽取 与 选择 器 相 匹配 的 元 素 | 


在 将 CSS 选择 器 传递 给 了 $ 函数 之 后 ， 就 能 够 抽取 出 与 其 相 匹 配 的 元 素 。 而 通过 第 2 个 参数 还 能 够 
制定 搜索 范围 。 即 使 浏览 器 不 支持 在 CSS2 或 CSS3 中 引入 的 选择 器 ， 也 能 够 使 用 这 一 功能 。 


// 通过 Css 选择 器 ， 从 id="foo" 的 元 素 的 子 元 素 中 抽取 出 class="bar" 的 div 元 素 
SU Gl ls) 


// 同样 是 从 id="foo" 人 class="bar" 的 div 元 素 
Su(O re a #4f00" 


// 以 下 面 的 方式 指定 参数 也 能 获得 相同 的 结果 
var foo = document .getElementById('foo'); 
Ri 


































































































另外 ， 除 了 CSS 选择 器 之 外 还 能 够 使 用 jQuery 自 定 义 的 选择 器 。 将 在 之 后 说 明 能 够 在 选择 器 中 使 
的 语法 。 
国 12.4.2 创建 新 的 DOM 元 素 | 
如 果 将 可 以 被 解释 为 html 标签 的 字符 串 传 递 给 $ 函数 ， 则 能 够 创建 新 的 元 素 。 
$('<div> 新 的 div 元 素 </div>); 
国 12.4.3 将 已 有 的 DOM 元 素 转 换 为 jQuery 对 象 | 


如 果 将 已 有 的 DOM 元 素 传递 给 $ 函数 ， 就 能 够 将 其 转换 为 jQuery 对 象 。 


// 将 body 元 素 转换 为 jQuery 对 象 
$ (document .body); 











工 


























国 12.4.4 对 DOM 构造 完成 后 的 事件 侦 听 器 进行 设 定 | 


如 果 把 一 个 Function 对 象 传递 给 $ 函数 ， 则 能 让 该 函数 在 DOM 构造 完成 后 执行 。 这 与 对 document 
的 ready 事件 设 定 事件 侦 听 器 的 写法 的 效果 是 等 价 的 。 之 后 还 会 详细 说 明 。 











图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 





@@ 228 一 一 一 第 3 部 分 客户 


eevee em (et 
// DOM 构造 完成 后 的 处 理 
风 


// 等 同 于 这 种 方式 





$ (document) .ready (Eunction() 





// DOM 构造 完成 后 的 处 理 


bo 
12.5 


国 12.5.1 元 素 的 选择 


端 JavaScript 


通过 jQuery 进行 DOM 操作 


可 以 通过 $ 函数 选择 元 素 。 表 12.1 总 结 了 包括 CSS 选择 器 在 内 的 jQuery 所 能 使 用 的 选择 器 。 对 于 
jQuery 自 定 义 的 选择 器 ， 将 用 O 〇 进行 标识 。 





































































































































































































































































































表 12.1 jQuery 所 能 使 用 的 选择 器 
选择 器 语法 被 选择 的 元 素 
一 所 有 的 元 素 
#id 一 指定 id 的 元 素 
.class 一 指定 class 的 元 素 
tag 一 标签 名 为 tag 的 元 素 
选择 器 1, 选择 器 2, 选择 器 N 一 与 指定 选择 器 中 的 某 个 相 匹配 的 元 素 
parent > child 三 与 选择 器 parent 相 匹 配 的 元 素 的 直接 子 元 素 中 与 选择 器 child 相 匹 配 的 元 素 
ancestor descendant — 与 选择 器 ancestor 相 匹 配 的 元 素 的 子 元 素 中 与 选择 器 descendant 相 匹 配 的 元 素 
prev + next 区 与 选择 器 prev 相 匹 配 的 元 素 的 下 一 个 兄弟 元 素 ， 且 还 需要 与 选择 器 next 相 匹配 
prev ~ siblings = 与 选择 器 prev 相 匹 配 的 元 素 之 后 的 兄弟 元 素 ， 且 还 需要 与 选择 器 siblings 相 匹 配 
attr] 一 具有 属性 attr 的 元 素 
attr="val" 一 属性 attr 的 值 为 val 的 元 素 
attrl="val"] 属性 attr 的 值 不 为 val 的 元 素 
attr"="val"] 属性 attr 的 值 以 val 开始 的 元 素 
attr$="Val"] 一 属性 attr 的 值 以 val 结束 的 元 素 
attr*="Val"] 一 属性 attr 的 值 含有 val 的 元 素 
attr~="val] = 将 属性 attr 的 值 以 空格 进行 分 割 后 ， 含 有 值 为 val 的 片段 的 元 素 
attr|="val"] 一 属性 attr 的 值 为 val 或 以 val- 开始 的 元 素 (*1) 
属性 选择 器 1][ 属性 选择 器 2][ 属 | - 与 指定 的 多 个 属性 选择 器 都 匹配 的 元 素 
性 选择 器 N] 
:contains(text) 一 在 文本 内 容 中 包含 text 的 元 素 
:empty 一 没有 子 元 素 ( 包括 文本 ) 的 元 素 
:parent O 拥有 子 元 素 ( 包括 文本 ) 的 元 素 
:has(sel) O 拥有 与 选择 器 sel 相 匹 配 的 子 元 素 的 元 素 
:header O h1 ~ h6 元 素 
:animated O 动画 中 的 元 素 
:not(sel) 一 与 选择 器 sel 不 匹配 的 元 素 
:first O 第 一 个 的 元 素 
:last O 最 后 一 个 的 元 素 
:even O 第 偶数 个 元 素 
:odd O 第 奇数 个 元 素 
:eq(n) O 第 n 个 元 素 
:gt(n) O 第 n 个 元 素 之 后 的 元 素 ( 不 包括 第 n 个 元 素 ) 
:It(m) O 第 n 个 元 素 之 前 的 元 素 ( 不 包括 第 n 个 元 素 ) 
:first—child 一 第 一 个 子 元 素 
:last—child — 最 后 一 个 子 元 素 
:nth—child(n) 一 第 n 个 子 元 素 
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( 续 ) 
选择 器 语法 自 定义 被 选择 的 元 素 
:only-child 四 没有 兄弟 元 素 的 元 素 
:hidden O 隐藏 的 元 素 (*2) 
:visible O 可 见 元 素 (*2) 
:focus — 处 于 焦点 的 元 素 
:disabled — 处 于 禁用 状态 的 元 素 
:enabled 一 处 于 启用 状态 的 元 素 
:checked O 勾 选 的 元 素 
:selected © option 元 素 中 被 选择 的 元 素 
:input O input、textarea、select、button 元 素 
:checkbox O ype="checkbox" 的 元 素 
:radio O type="radio'" 的 元 素 
:file 加 ype="file" 的 元 素 
:image O type="image" 的 元 素 
:text O ype="text" 的 元 素 
:password O type="password" 的 元 素 
:button O button 元 素 或 type="button" 的 元 素 
:submit O type="submit" 的 元 素 
:reset O ype="reset" 的 元 素 
#1 主要 用 于 选择 语言 代码 。 例 如， 可 以 通过 alhreflang|="ja"] 的 方式 来 选择 日 语 的 页 面 链接 。 这 时 ，hreflang 为 ja 或 ja-JP 的 元 


素 都 能 够 被 选择 。 
*2 如 果 与 以 下 条 件 中 的 某 些 相符 ， 元 素 则 会 被 认为 是 隐藏 。 


e 在 CSS 中 被 指定 为 "display: none" 的 元 素 @ type="hidden" 的 input 元 素 
e 宽 与 高 都 为 0 的 元 素 @ 父 元 素 是 隐藏 元 素 


而 在 CSS 中 被 指定 为 "visibility: hidden" 或 "opatcity:0" 的 元 素 不 会 被 判定 为 隐藏 元 素 


此 外 ， 还 可 以 以 当前 选中 的 元 素 集 为 基础 ， 进 一 步 进行 筛选 ， 或 以 所 指定 的 相对 关系 选择 元 素 。 表 
12.2 总 结 了 与 此 相关 的 方法 。 























2 用 于 选 下 














































































































































































































































































































find(sel) 在 所 有 的 子 元 素 中 选择 与 选择 器 sel 相 匹 配 的 元 素 

contents() 选择 所 有 含有 文本 节点 前 直接 子 元 素 

children([sel]) 选择 直接 子 元 素 。 可 以 通过 选择 器 se| 过 滤 

sibling([sel]) 选择 所 有 的 兄弟 元 素 。 可 以 通过 选择 器 sel 过 滤 

next([sel]) 获取 紧 接着 的 下 一 个 元 素 。 可 以 通过 选择 器 se| 过 滤 

nextAll([sel]) 选择 之 后 所 有 的 兄弟 元 素 。 可 以 通过 选择 器 sel 过 滤 

nextUntil([until, J[sel]) 选择 之 后 跟着 的 所 有 兄弟 元 素 。 如 果 指 定 了 选择 器 until， 则 将 只 选择 到 与 其 相 匹 配 的 元 素 为 止 。 
可 以 通过 选择 器 sel 过 滤 

prev([sel]) 获取 相 邻 的 前 一 个 元 素 。 可 以 通过 选择 器 se| 过 滤 

prevAll([se 选择 之 前 所 有 的 兄弟 元 素 。 可 以 通过 选择 器 se| 过 滤 

prevUntil([sell]) 选择 之 前 所 有 的 兄弟 元 素 。 如 果 指 定 了 选择 器 until, 则 将 只 选择 到 与 其 相 匹 配 的 元 素 为 止 。 可 以 
通过 选择 器 se| 过 滤 

parent([sel]) 选择 直接 父 元 素 。 可 以 通过 选择 器 se| 过 滤 

parents([sel]) 选择 所 有 的 祖先 元 素 。 可 以 通过 选择 器 se| 过 滤 

parentsUntil([until,][sel]) 选择 所 有 的 祖先 元 素 。 如 果 指定 了 选择 器 until, 则 将 只 选择 到 与 其 相 匹配 的 祖先 元 素 。 如 果 指 定 
了 选择 器 sel， 则 将 只 选择 与 之 相 匹 配 的 元 素 

offsetParent() 选择 距 所 指定 的 position 最 近 的 父 元 素 

closest(sel, [context]) 以 自己 为 起 点 向 上 遍历 DOM 树 ， 选 择 第 一 个 与 选择 器 sel 小 相 匹 配 的 元 素 。 自 己 本 身 也 是 可 被 
选择 的 对 象 。 如 果 指定 了 元 素 context， 出 将 以 此 为 过 泪 条 件 ， 只 选择 存在 于 该 元 素 内 的 元 素 

filter(sel) 选择 ee sel 相 匹配 的 元 素 。 如 果 sel 被 指定 为 一 个 函数 , 则 将 选择 能 使 该 函数 返回 true 值 
的 元 素 (* 

not(sel) 选择 i 和 sel 相 匹 配 的 元 素 。 如 果 sel 被 指定 为 一 个 函数 , 则 将 选择 能 使 该 函数 返回 false 值 
的 元 素 (* 

eq(m) 选择 第 n 1 如 果 n 被 指定 为 了 负 值 ， 则 选择 倒数 第 n 个 元 素 
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端 JavaScript 














( 续 ) 
Jr 说 明 
has(se)) 选择 含有 与 选择 器 sel 相 匹 配 的 子 元 素 的 元 素 
first() 选择 第 一 个 元 素 
last() 选择 最 后 一 个 元 素 





slice(start, [end]) 


选择 从 第 start 个 起 至 第 end 个 的 








定 了 负 值 ， 则 将 从 元 素 集 的 最 后 开始 向 前 倒数 


元 素 。 如 果 没 有 指定 end， 则 将 选择 到 元 素 集 的 最 后 。 如 果 设 


























































































































is(sel) 对 是 否 匹 配 选择 器 sel 进行 判断 。 返 回 值 是 Boolean 型 

mapl(func(n, elem)) 通过 回调 函数 func 来 返回 对 各 个 元 素 的 处 理 结果 。 回 调 函 数 的 参数 是 元 素 的 index 与 DOM 元 素 
add(sel) 句 当前 元 素 集中 添加 与 选择 器 se| 相 匹 配 的 元 素 集 

andSelf() 句 当 前 元 素 集中 添加 之 前 一 个 状态 的 元 素 集 

end() 将 元 素 集 的 选择 状态 还 原 为 之 前 一 个 状态 








(*1) 元 素 的 index 将 被 作为 参数 传递 给 函数 。 


压 12.5.2 元 素 的 创建 添加 . 替换 ' 删除 
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li 








可 以 














过 $ 函数 来 创 到 





12.3 总 结 了 与 元 素 操作 相关 的 方法 。 


表 12.3 用 于 对 元 素 进行 操作 的 方法 





EE 元素。 男 外 ， 还 可 以 通过 append0 方法 同时 执 
进行 蔡 换 操作 ， 可 以 使 用 replaceWithO) 等 方法 ， 女 











而 函数 内 的 this 所 引用 的 就 是 该 DOM 元 素 。 
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位 元 























素 的 创建 与 添加 。 如 果 要 
1 果 要 进行 删除 操作 ， 则 可 以 使 用 


remove() 等 方法 。 表 














































































































































































































































































































































































































append(content, [content]) 等 content 添加 到 子 元 素 的 最 后 
append(funclindex, htmlStn) 将 函数 func 的 结果 添加 到 子 元 素 的 最 后 

函数 将 接收 元 素 的 下 标 与 HTML 字符 串 ， 并 返回 一 个 HTML 字符 串 
appendTol(target) 将 当前 的 元 素 集 添加 到 target 子 元 素 的 最 后 
prepend(content, [content]) 将 content 添加 到 子 元 素 的 最 后 
prepend(func(index, htmlStr)) 将 函数 func 的 结果 添加 到 子 元 素 的 头 部 

函数 将 接收 元 素 的 下 标 与 HTML 字符 串 ， 并 返回 一 个 HTML 字符 串 
prependTol(target) 将 当前 的 元 素 集 添加 到 target 子 元 素 的 头 部 
html(htmlStn 义 HTML 字符 串 htmlStr 创建 DOM 并 设 为 元 素 
html(func(index, htmlStr)) 将 函数 func 的 结果 设 为 元 素 。 

函数 将 接收 元 素 的 下 标 与 HTML 字符 串 ， 并 返回 一 个 HTML 字符 串 
text(str) 将 字符 串 str 设 为 元 素 
text(func(index, stn)) 将 函数 func 的 结果 设 为 元 素 。 函 数 将 接收 元 素 的 下 标 与 字符 串 ， 并 返回 一 个 字符 串 
after(content, [content]) 将 content 添加 到 元 素 之 后 
after(func(index)) 将 函数 func 的 结果 添加 到 元 素 之 后 。 函 数 将 接收 元 素 的 下 标 ， 并 返回 一 个 HTML 字符 串 
before(content, [content]) 将 content 添加 到 元 素 之 前 
before(func(index)) 将 函数 func 的 结果 添加 到 元 素 之 前 。 函 数 将 接收 元 素 的 下 标 ， 并 返回 一 个 HTML 字符 串 
insertAfter(target) 将 元 素 添加 到 target 之 后 
insertBefore(target) 将 元 素 添加 到 target 之 前 
replaceWith(content) 将 元 素 替 换 为 content 
replaceWith(func) 将 元 素 蔡 换 为 函数 func 的 返回 值 。 函 数 返回 的 是 HTML 字符 串 
replaceAll(target) 将 target 全 部 替换 为 当前 元 素 
wrap(content) 义 content 来 包 衰 元 素 
wrap(func(index)) 义 函 数 func 的 返回 值 来 包 豪 元 素 。 

函数 将 接收 元 素 的 下 标 ， 并 返回 一 个 HTML 或 jQuery 对 象 
wraplnner(content) 义 content 来 包 豪 元 素 中 的 内 容 
wraplnner(func(index)) 义 函 数 func 的 返回 值 来 包括 元 素 中 的 内 容 。 

函数 将 接收 元 素 的 下 标 ， 并 返回 一 个 HTML 或 jQuery 对 象 
wrapAll(content) 义 content 来 包 带 整个 元 素 集 
unwrap!() 除 元 素 外 所 包 衰 的 父 元 素 
removel[sel]) l 除 元 素 集 中 与 选择 器 sel 相 匹 配 的 元 素 。 

如 果 没 有 指定 选择 器 ， 则 删除 所 有 内 容 
detach([sel]) 与 remove() 相同 。 不 过 将 会 保留 事件 侦 听 器 的 设 定 
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( 续 ) 
方法 说 明 
empty() 将 元 素 清空 
clone([withDataAndEvents,] | 复制 元 素 。 如 果 第 1 个 参数 为 true ( 默认 为 true ) 则 会 一 起 复制 事件 侦 听 器 。 如 果 第 2 个 参数 与 





[deepDataAndEvents 





true ( 默认 为 true )， 则 会 一 起 复制 子 元 素 














12.6 


通过 jQuery 处 理事 件 


故 12.6.1 事件 侦 听 器 的 注册 删除 


围 bind()/unbind() 
在 jQuery 中 ,我 们 可 以 通过 bind0) 方法 来 注册 事件 侦 听 器 。 


侦 听 器 。 也 可 以 传递 引 


数 。 如 果 没 有 指定 参数 ， 则 将 删除 元 素 中 所 有 被 设 定 的 


unb 








有 件 类 型 与 事 们 











需要 向 该 方法 传递 的 是 事 





F 侦 听 顺 的 映射 ， 以 同时 注册 多 个 事件 侦 听 器 。 








而 如 果 要 删除 事件 侦 听 器 ， 则 可 以 使 用 unbind0 方法 。 需 要 向 该 方法 的 参数 传递 的 是 事件 类 型 与 函 





ind() 方法 的 例子 。 


由 








上 代码 清单 12.5 通过 jQuery 注册 事件 侦 听 器 


<div class='foo'>foo</div> 

<div class='bar'>bar</div> 

<div class='baz'>baz</div> 

<script> 

// 为 click 事件 注册 事件 侦 听 器 

So Foo bind( relitor. 
s(this) .text ('Hellol' 

































































Sumeaecrm 人 
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{ 
































事件 侦 听 器 。 在 代码 清单 12.5 中 是 bind0 方法 与 






































bg 
// 同时 注册 多 个 事件 侦 听 器 
HS( ,5a ,Si 
'mouseover': function() { 
SEE 
oe EUuneceion( 
Ste hs) te (emer 
} 
Ds 
// 当 点 击 baz 时 ， 将 会 删除 bar 的 mouseout 事件 的 事件 侦 听 器 
oar bn lle ene lon 
SO parm uneund( mouseou 
四 5 
ne 
国 live()/die() 
还 可 以 通过 live( 方法 来 注册 事件 侦 听 器 。 其 使 用 方式 与 bind() 相同 。 
bind() 与 live0 的 区 别 在 于 ， 通 过 bind0 注册 的 事件 侦 听 器 只 能 对 在 执行 bnd0 时 已 经 存在 的 元 素 产 
生效 果 ， 而 通过 live0 注册 的 事件 侦 听 需 则 能 对 在 执行 了 bind0 之 后 才 添 加 的 元 素 也 产生 效果 。 之 所 以 在 
事件 侦 听 器 被 设 定之 后 才 添 加 的 元 素 也 能 够 受到 事件 侦 听 器 的 侦 听 ， 是 因为 live0 是 对 document 对 象 进 
行事 件 侦 听 器 的 设 定 的 。 对 document 对 象 设 定 的 事件 侦 听 器 的 处 理 流 程 是， 首先 检 查 冒 泡 阶 段 的 事件 ， 
如 果 事 件 与 live() 所 指定 的 选择 器 或 事件 类 型 相 匹 配 ， 则 将 执行 所 注册 的 事件 侦 听 器 。 
可 以 通过 die0 方法 来 解除 通过 live0) 设 定 的 事件 侦 听 咒 。 这 与 unbind() 的 使 用 方法 相同 。 


围 delegate(/undelegated() 








之 前 提 到 过 ,在 使 用 live0 时 ， 其 实事 件 侦 














听 融 是 被 设 定 了 


F document 对 象 之 上 。 而 如 细 





使 用 的 是 
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delegate() 方法 ， 则 能 够 对 document 对 象 之 外 的 对 象 执行 live0 以 设 定 事 件 侦 听 器 。 也 就 是 说 ， 从 功能 
来 说 以 下 两 行 是 相同 的 。 
$ 
$ 


虽说 两 者 的 功能 是 一 样 的 ， 但 delegate() 的 性 能 比 live0 更 为 优秀 。 这 是 因为 live0 在 $('.foo') 时 会 
查找 foo 类 的 元 素 ， 而 delegate() 则 不 需要 进行 这 样 的 查找 操作 。foo 类 这 一 信息 只 被 用 于 事件 被 触发 时 
对 该 事件 目标 是 否 与 条 件 相 匹配 进行 判断 ， 而 不 必 在 设 定 事件 侦 听 器 时 对 foo 类 的 元 素 进行 检索 。 因 此 ， 
可 以 说 不 进行 无 用 的 元 素 检索 的 delegate() 在 性 能 上 更 为 优秀 。 

如 果 要 解除 通过 delegate0 设 定 的 事件 侦 听 器 ， 则 可 以 使 用 undelegate0 方法 。 
园 one() 

one( 方法 是 一 种 bind0 的 特殊 形式 。 通 过 one() 注册 的 事件 侦 听 器 只 会 被 执行 一 次 。one0) 的 使 用 方 
式 与 bind() 相同 。 


国 12.6.2 事件 专用 的 事件 侦 听 器 注册 方法 | 


一 些 标 准 事件 还 提供 了 相应 的 专用 方法 ， 也 可 以 使 用 这 些 方 法 来 注册 事件 侦 听 器 。 
提供 了 专用 方法 的 事件 有 以 下 这 些 。 关 于 各 个 事件 的 意义 ， 请 参见 10.6.2 市。 
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( 7 
(document) .delegate('.foo', "click', function() { /* 处 理 */ })); 
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@ click @ dblclick @@ mousedown 
@ mouseup @ mousemove @ mouseout 
@@ mouseover @ mouseleave @ mouseenter 
@ keydown ® keypress @ keyup 

@ change ® blur @ focus 

@ focusin ® focusout ® select 

@ submit @ resize ® scroll 

® load @ unload @ error 














这 些 方法 的 第 1 个 参数 用 于 接收 需要 传递 给 事件 侦 听 器 的 数据 的 映射 (可 以 省 略 )， 而 第 2 个 参数 则 
用 于 接收 事件 侦 听 器 。 可 以 通过 Event 对 象 的 data 属性 来 引用 第 1 个 参数 所 指定 的 映射 。 如 果 在 不 传递 
参数 的 情况 下 执行 这 些 方法 ， 将 会 触发 相应 的 事件 。 代 码 清单 12.6 是 其 使 用 示例 。 


| 代码 清单 12.6 ”事件 专用 的 事件 侦 听 器 注册 方法 


“qi olasse LE el Me /dy 

<div class='bar'>Double Click Me!</div> 

SE 

// 对 click 事件 注册 事件 侦 听 器 

$('.fo0') .click({ message: 'Hello!' }, function (event) { 
alert (event .data.message) ; // => 将 会 显示 Hello! 这 一 提示 


把 这 
// 当 双 击 .bar 时 ， 将 会 触发 . foo 的 click 事件 
Sra ole euneeron 
SO Eo ek Oe 
os 


ET 二 


































































































转 12.6.3 "eady() 方法 | 
在 jQuery 中 ， 我 们 可 以 像 代码 清单 12.7 这 样 ， 通 过 ready0 方法 对 DOM 构造 完成 后 的 处 理 进 行 设 定 。 
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| 代码 清单 12.7 ”通过 jQuery 进行 基本 的 JavaScript 处 理 


$ (document) .ready (function() { 

// 这 里 写 的 是 需要 在 document 对 象 的 ready 事件 中 执行 的 处 理 

// 也 就 是 说 ， 这 里 要 写 的 是 初始 化 处 理 ( 通常 会 对 其 他 元 素 的 事件 处 理 程序 进行 设 定 ) 
// ready 事件 的 触发 时 机 与 DOMContentLoaded 事件 的 触发 时 机 相同 

yy 


// 也 可 以 使 用 像 下 面 这 样 省 略 写 法 
EEC 


交配 











通过 jQuery 对 样式 进行 操作 


于 更 改 类 名 的 方法 到 各 种 动画 ， 都 能 够 简单 


| 12.7 


jQuery 提供 了 一 些 方便 的 方法 以 对 样式 进行 操作 。 从 
地 进行 操作 。 


国 12.7.1 基本 的 样式 操作 | 
jQuery 提供 了 一 些 能 够 执行 更 改元 素 所 设 定 的 类 名 或 CSS 属性 等 基本 样式 操作 的 方法 。 表 12.4 总 结 
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了 这 些 方法 。 
表 12.4 基本 的 样式 操作 

方法 说 明 
css(prop) 获取 CSS 属性 prop 的 值 
css(prop, val) 将 CSS 属性 prop 的 值 设 定 为 val 
css(prop, func(index, val)) 将 CSS 属性 prop 的 值 设 定 为 函数 func 的 返回 值 。 

函数 将 接收 元 素 的 下 标 与 当前 的 prop 值 ， 并 返回 将 要 设 定 的 值 
css(props) 同时 设 定 多 个 CSS 属性 。props 是 属性 名 与 属性 值 的 映射 
addClass(clazz) 将 类 clazz 添加 到 元 素 
addClass(func(index, clazz)) 将 番 董 func 的 返回 值 添加 到 类 中 。 

函数 将 接收 元 素 的 下 标 与 当前 的 类 ， 并 返回 将 要 添加 的 类 
removeClass([clazz]) 从 元 素 中 删除 类 clazz。 如 果 没有 指定 参数 ， 则 将 删除 所 有 的 类 
removeClass(funcl(index, clazz)) 从 类 中 删除 函数 func 的 返回 值 。 

函数 将 接收 元 素 的 下 标 与 当前 的 类 ， 并 返回 将 要 删除 的 类 
toggleClass(clazz) 如 果 元 素 具 有 类 clazz， 则 将 其 删除 ， 否 则 添加 该 类 
toggleClass(func(index, clazz)) 如 果 元 素 具 有 函数 func 的 返回 值 ， 则 将 其 删除 ， 否 则 添加 该 返回 值 。 函 数 将 接收 元 素 的 下 

标 与 当前 的 类 ， 并 返回 将 要 进行 操作 的 类 
hasClass(clazz) 判断 元 素 是 否 含有 类 clazz。 返 回 值 是 Boolean 型 
height() 获取 不 含 border 及 padding 等 的 元 素 高 度 。 单 位 为 px 
innerHeight() 获取 含有 padding 的 元 素 高 度 。 单 位 为 px 
outerHeight([includeMargin]) 获取 含有 border 的 元 素 高 度 。 

如 果 人 参数 被 设 定 为 true， 则 获取 同时 包含 border 与 margin 的 元 素 高 度 。 单 位 为 px 
width() 获取 不 含 border 及 padding 等 的 元 素 宽 度 。 单 位 为 px 
innerWidth() 获取 含有 padding 的 元 素 宽 度 。 单 位 为 px 
outerWidth([includeMargin]) 获取 含有 border 的 元 素 宽度 。 

如 果 参 数 被 设 定 为 true， 则 获取 同时 包含 border 与 margin 的 元 素 宽度 。 单 位 为 px 
height(val) 设 定 元 素 的 高 度 。 对 于 所 传递 的 参数 ， 将 会 作为 像素 值 处 理 
height(func(index., h)) 将 函数 func 的 返回 值 作为 高 度 进行 设 定 。 

函数 将 接收 元 素 的 下 标 与 当前 的 高 度 ， 并 返回 将 要 设 定 的 高 度 。 
width 人 val) 设 定 元 素 的 宽度 。 对 于 所 传递 的 参数 ， 将 会 作为 像素 值 处 理 
width(func(lindex, h)) 将 函数 func 的 返回 值 作为 宽度 进行 设 定 。 

函数 将 接收 元 素 的 下 标 与 当前 的 宽度 ， 并 返回 将 要 设 定 的 宽度 。 
offset() 获取 元 素 在 文档 坐标 中 的 位 置 (*1) 
position() 获取 元 素 与 以 position 属性 所 指定 的 第 一 个 父 元 素 之 间 的 相对 位 置 (*1) 
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( 续 ) 
方法 说 明 
offset(pos) 对 元 素 在 文档 坐标 中 的 位 置 进行 设 定 (*1) 
offsetlfunc(index, pos)) 将 函数 func 的 返回 值 作 为 元 素 在 文档 坐标 中 的 位 置 进行 设 定 。 









































函数 将 接收 元 素 的 下 标 与 当前 的 位 置 ， 并 返回 将 要 设置 的 位 置 






















































































ScrollTop() 获取 元 素 的 纵向 滚动 位 置 。 单 位 为 px 
scrollTop(val) 将 数值 设置 为 元 素 的 纵向 滚动 位 置 。 单 位 为 px 
scrollLeft() 获取 元 素 的 横向 滚动 位 置 。 单 位 为 px 
scrollLeft(val) 将 数值 设置 为 元 素 的 横向 滚动 位 置 。 单 位 为 px 

















(*1) 位 置 是 一 个 具有 top 属性 与 left 属性 的 对 象 。 各 个 属性 的 值 都 是 数值 类 型 (单位 为 px ) 

样式 操作 方法 中 的 css0 方法 有 着 多 种 用 途 。 在 向 css0 方法 传递 了 属性 名 与 属性 值 以 执行 该 方法 时 ， 
还 可 以 以 "+=10" 或 "-=20" 这 样 的 方式 表示 所 传递 的 值 。 例 如 ， 如 果 要 让 div 元 素 的 margin 增加 10px， 
则 可 以 像 下 面 这 样 书写 。 


SU eon 


国 12.7.2 动画 由 


jQuery 不 仅 提 供 了 一 些 更 改 样式 的 简单 方法 ， 还 准备 了 不 少 能 够 在 执行 动画 的 同时 更 改 样式 的 方法 。 
这 些 方法 常常 能 够 接收 以 下 参数 : 动画 的 持续 时 间 (duration )、 动 画 的 加 速度 ( easing )， 以 及 动画 结 
时 的 处 理 方 式 (callback )。 
围 duration 


duration 是 动画 从 开始 到 结束 所 需 的 时 间 ， 其 单位 为 毫秒 。 如 果 没 有 指定 值 ， 则 默认 为 400 毫秒 。 此 
外 ， 也 可 以 不 直接 指定 数值 ， 而 是 使 用 slow 或 fast 这 样 的 关键 字 。slow 相当 于 指定 为 600 毫秒 ， 而 fast 
则 相当 于 指定 为 200 上 毫秒。 
转 easing 

easing 是 用 于 设 定 动画 变化 的 改变 量 的 关键 字 。 标 准 的 做 法 是 使 用 swing 与 linear 这 两 个 关键 字 来 设 
定 。 如 果 没 有 指定 值 ， 则 默认 为 swing。 

swing 将 会 以 “最 初 缓慢 、 中 途 快 速 、 最 后 缓慢 ”的 方式 对 值 改变 。 其 具体 实现 是 通过 数学 中 的 cos 
函数 完成 的 。 

而 linear 则 会 与 所 经 过 的 时 间 成 比例 地 进行 线性 变化 。 假 如 每 秒 移动 100px， 那 么 ， 经 过 了 0.1 秒 时 
将 会 移动 10px， 经 过 了 0.5 秒 时 移动 50px， 而 经 过 了 0.99 秒 时 移动 了 99px。 

如 果 使 用 了 jQuery UI， 则 还 能 够 使 用 更 多 的 关键 字 。 
转 callback 

callback 指定 的 是 在 动画 结束 时 将 执行 的 回调 函数 。 该 回调 函数 不 接收 任何 参数 。 而 在 回调 函数 内 的 
this 是 正在 执行 动画 的 DOM 元 素 。 

表 12.5 总 结 了 可 以 用 于 动画 的 方法 。 而 如 果 使 用 了 jQuery UI， 则 能 够 简单 地 实现 丰富 多 彩 的 动画 效果 。 

























































































































































































表 12.5 动画 
Jos 说 明 
hide([duration,] [easing,] [callback]) 隐藏 元 素 
show!([duration,] [easing,] [callback]) 显示 元 素 
toggle([duration,] [easing,] [callback]) 切换 元 素 的 隐藏 “显示 状态 
fadeln([duration,] [easing,] [callback]) 对 元 素 执行 淡 入 效果 
fadeOut([duration,] [easing,] [callback]) 对 元 素 执行 淡出 效果 
fadeToggle([duration,] [easing,] [callback]) 如 果 元 素 被 隐藏 则 淡 入 ， 否 则 滩 出 
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( 续 ) 

方法 说 明 
fadeTo(duration, opacity, [easing,] [callback]) 将 元 素 的 不 透明 度 渐变 至 opacity 
slideDown([duration,] [easing,] [callback]) 句 下 滑动 元 素 
slideUp([duration,] [easing,] [callback]) 句 上 滑动 元 素 
slideToggle([duration,] [easing,] [callback]) 如 果 元 素 被 隐藏 则 向 下 滑动 ， 否 则 向 上 滑动 
animate(props, [duration,] [easing,] [callback]) 将 元 素 的 CSS 变 为 props 的 状态 
stop([clearQueue,] [jumpToEnd]) 停止 动画 
queue([queueName]) 芭 得 队列 
queue(l[queueName], newQueue) 向 队列 中 添加 处 理 
dequeue(l[queueName]) 去 除 队列 中 的 第 一 个 元 素 并 执行 该 元 素 
delay(duration, [queueName]) 义 duration 为 时 间 暂 停 队 列 的 处 理 
clearOueue([queueName]) 清空 队列 

jQuery.fx.interval 与 jQuery.fx.off 是 与 在 jQuery 中 执行 的 动画 全 体 相 关 的 两 个 属性 。 
围 jQuery.fx.interval 

jQuery.fx.interval 指定 了 动画 的 帧 间隔 ， 其 默认 值 为 13 毫秒 。 如 果 增 大 该 值 ， 动 画 将 变 得 卡 顿 。 如 








果 减 小 该 值 ， 动 画 则 会 变 得 流畅 ， 不 过 这 当然 也 取决 于 CPU 等 客户 端 PC 的 处 理性 能 。 无 法 对 每 个 动画 
分 别 设 定 帧 间隔 。 



































国 jQuery.fx.off 
在 将 jQuery. 人 多.o 企 指定 为 true 之 后 ， 所 有 的 动画 效果 都 将 被 禁用 。 该 属性 可 用 于 移动 设备 等 客户 端 
性 能 较 低 的 场合 ， 以 期 提高 在 特定 环境 下 的 可 用 性 。 如 果 jQuery. 仪 .off 为 true， 在 所 有 的 动画 中 指定 的 执 
































行 时 间 都 将 被 忽略 。 


12.8 | 通过 jQuery 进行 AJAX 操作 


国 12.8.1 AJAX( 函数 | 
在 jQuery 中 ， 我 们 可 以 通过 jQuery.ajax( 函数 来 实现 AJAX 处 理 。 可 以 对 ajax0 函数 指定 2 个 参数 。 

第 1 个 参数 指定 的 是 目标 URL。 第 2 个 参数 则 是 一 个 被 指定 了 相关 参数 、 所 使 用 的 HTTP 类 型 或 回调 函 

数 等 信息 的 对 象 ( 代码 清单 12.8 )。 此 外 ， 也 可 以 省 略 第 1 个 参数 ， 而 将 URL 指定 为 第 2 个 参数 中 的 对 

象 的 属性 。 

| 代码 清单 12.8 ”通过 jQuery 执行 AJAX 操作 















































CC 
EECRETO 
SUeaesefoneticn 划 (人 aaaEEESEOS En 天 | 
// 成 功 时 将 执行 的 处 理 
error: function (xhr, status, errorThrown) { 


// 失败 时 将 执行 的 处 理 





同属 
表 12.6 总 结 了 传递 给 第 2 个 参数 的 对 象 可 以 指定 的 一 些 主要 属性 。 
表 12.6 在 ajax() 函数 中 可 以 指定 的 属性 








0 
册 











属性 名 说 明 
url 请 求 发 送 目 标的 URL 
type 所 使 用 的 HTTP 类 型 
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( 续 ) 

timeout 超时 时 间 。 单 位 为 毫秒 

async 是 否 执行 异步 通信 

crossDomain 是 否 执行 跨 源 通信 

isLocal 在 访问 文件 系统 等 本 地 环境 时 值 为 true 

data 所 发 送 的 数据 对 象 或 字符 串 

processData 是 否 不 将 data 转换 为 查询 字符 串 就 发 送 

traditional 该 属性 用 于 对 将 data 转换 为 查询 字符 串 时 所 用 的 序列 化 方式 进行 指定 。 如 果 被 指定 为 true,， 则 通过 老式 
的 方式 ， 在 转换 时 不 对 黎 套 的 对 象 进行 序列 化 

headers 请 求 头 部 

ifModified 如 果 该 值 被 指定 为 true， 则 只 有 在 数据 被 更 改 的 时 候 请 求 才 算 发 送 成 功 

cache 是 否 使 用 浏览 器 缓 有 有 

dataType 通过 字符 串 指定 响应 数据 的 类 型 。 可 指定 为 xml、html、script、json 及 text 中 的 一 种 。 回 调 函 数 将 会 把 
数据 转换 为 这 里 所 指定 类 型 后 传递 

accepts 对 Accept 头 部 信息 进行 指定 的 值 的 映射 。 其 键 为 dataType， 值 为 Accept 头 部 信息 所 指定 的 值 

mimeType 强制 覆 写 于 Content-Type 头 部 信息 中 的 值 

contents 在 通过 Content-Type 头 部 信息 来 判断 响应 数据 的 类 型 时 所 用 的 正则 表达 式 的 映射 ( 其 键 为 dataType， 
其 值 为 正则 表达 式 ) 

converters 于 分 析 响 应 数据 的 函数 的 映射 。 其 键 为 转换 前 与 转换 后 的 数据 类 型 以 空格 相连 而 成 的 字符 串 ( 如 果 是 

text 转换 为 了 html 则 是 "text html" )， 其 值 为 函数 

context 可 调 函 数 内 的 this 所 引用 的 对 象 

beforeSend(xhr, settings) | 在 发 送 前 执行 的 回调 函数 。 如 果 该 函数 返回 了 false， 则 将 取消 请 求 的 发 送 

success(data, status, xhr) | 在 通信 成 功 时 执行 的 回调 函数 

error(xhr, status) 在 通信 失败 时 执行 的 回调 函数 

complete(xhr, status) 在 通信 完成 时 执行 的 回调 函数 。 在 成 功 或 失败 时 也 将 执行 

dataFilter(data, type) 于 对 响应 数据 过 滤 的 回调 函数 。 该 函数 将 在 success() 之 前 被 执行 ,其 结果 作为 data 参数 传递 给 success() 

statusCode 指定 每 一 个 状态 码 的 回调 函数 的 映射 。 其 键 为 状态 码 ， 其 值 为 函数 

jsonp 在 发 送 JSONP 请 求 所 使 用 的 用 于 指定 回调 函数 名 的 参数 名 。 如 果 没 有 指定 ， 则 默认 参数 名 为 callback 

jsonpCallback JSONP 请 求 的 回调 函数 名 。 如 果 没 有 指定 ， 则 会 自动 设 定 

scriptCharset 旨 定 读 取 script 时 所 用 的 字符 集 。 仅 在 dataType 为 jsonp 或 script 时 有 效 

global 是 否 触发 与 AJAX 相关 的 全 局 事件 

xhr 创建 XMLHttpRequest 对 象 的 工厂 函数 

xhrFields XMLHttpRequest 对 象 所 设 定 的 属性 的 映射 

username 在 需要 认证 的 访问 中 所 用 的 用 户 名 

password 在 需要 认证 的 访问 中 所 用 的 密码 
































闻 12.8.2 AJAX0 的 包装 函数 中 


ajax() 可 以 制定 各 种 各 样 的 选项 ， 不 过 对 于 一 些 常用 的 设 定 与 处 理 ，jQuery 备 有 专用 的 包装 函数 。 表 
12.7 对 包装 函数 进行 了 总 结 。 


























表 12.7 ajax() 函数 的 包装 函数 

















get(url, [data,] [success(data, status, xhr)] | 通过 GET 方式 进行 通信 。 























[dataType]) 可 以 对 发 送 的 数据 、 成 功 时 的 回调 函数 ， 及 响应 的 数据 类 型 进行 指定 
post(url, [data,] [success(data, status, xhr)] | 通过 POST 方式 进行 通信 。 
[dataType]) 参数 与 get() 函数 相同 





getJSON(url, [data,] [success(data, status, xhn)]) 通过 GET 方式 获取 JSON 数据 。 
可 以 对 发 送 的 数据 、 通 信 成 功 时 的 回调 函数 进行 指定 
getScript(url, [success(data, status, xhn]) 通过 GET 方式 获取 JavaScript 并 执行 。 
可 以 对 通信 成 功 时 的 回调 函数 进行 指定 

此 外 ， 可 以 通过 ajaxSetup0 函数 来 更 改 ajax0 函数 中 所 能 设 定 的 选项 的 默认 值 。 于 是 可 以 先 使 
ajaxSetup0 设 定 各 项 细节 选项 ， 然 后 在 实际 的 通信 中 使 用 包装 函数 ， 来 实现 通信 处 理 。 
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国 12.8.s 全 局 事件 | 
在 使 用 ajax0 函数 时 将 会 触发 多 个 事件 。 由 于 这 些 事件 对 任何 元 素 都 有 效 ， 因 此 被 称 为 全 局 事件 。 
如 果 不 希 望 触发 全 局 事件 ， 则 需要 通过 ajax0) 函数 的 选项 将 global 属性 设置 为 false。 
表 12.8 总 结 了 用 于 向 全 局 事件 注册 事件 侦 听 器 的 方法 。 



























































表 12.8 全 局 事件 的 事件 侦 听 器 注册 方法 









































侦 听 器 的 执行 时 机 
ajaxStart(func() AJAX 通信 开始 时 。 

即使 有 多 个 AJAX 通信 同时 执行 ， 也 仅 会 被 执行 1 次 
ajaxSend(func(event, xhr, options)) 请 求 发 送 前 
ajaxSuccess(func(event, xhr, options)) 通信 成 功 时 
ajaxError(func(event, xhr, options, error)) 通信 失败 时 
ajaxComplete(func(event, xhr options)) 通信 结束 时 ( 无 论 通信 成 功 还 是 失败 ) 
ajaxStop(func()) 所 有 的 AJAX 通信 结束 时 








12.9 | Deferred 


Deferred 是 一 种 将 异步 处 理 串 联 书 写 并 执行 的 机 制 。 

在 进行 同步 处 理 时 ， 各 种 处 理 将 会 按照 代码 的 书写 顺序 执行 。 在 一 个 处 理 结束 之 前 ， 下 一 个 处 理 不 
会 执行 。 与 之 相对 的 ， 再 进行 异步 处 理 时 ， 即 使 书写 时 是 具有 一 定 的 顺序 的 ， 也 会 同时 进行 多 个 处 理 ， 
因此 很 难 指定 处 理 的 顺序 ， 让 异步 处 理 B 在 异步 处 理 A 完成 之 后 再 开始 进行 。 虽 然 也 可 以 通过 将 之 后 要 
进行 的 处 理 指定 为 回调 函数 以 实现 对 处 理 顺 序 的 设 定 ， 但 这 样 一 来 回调 函数 将 会 产生 多 重 伦 套 ， 书 写 会 
变 得 很 复杂 。 而 且 ， 如 果 和 希望 在 处 理 A 与 处 理 B 结束 之 后 再 处 理 C， 复 杂 程 度 就 会 更 高 了 。 而 Deferred 
则 是 一 种 用 于 简单 地 描述 这 类 人 处理 的 机 制 。 


间 12.9.1 ” Deferred 的 基本 概念 | 


首先 ， 代 码 清单 12.9 是 一 个 使 用 了 Deferred 的 代码 示例 。 这 里 的 代码 实现 了 在 异步 处 理 foo 结束 之 
后 再 执行 男 一 个 处 理 bar。 


| 代码 清单 12.9 使 用 了 Deferred 的 代码 示例 


EUORCETSN ES 
var d = $.Deferred(); // 创建 Deferred 对 象 
// 异步 处 理 


setTimeout (function() { 





































































































d.resolve() ; // 向 Deferred 报告 处 理 已 经 结束 
人 OOOJ 
return d.promise(); // 返回 Promise 对 象 


EUnetaoneDar( el 
aler el ar 





// 在 foo 结束 之 后 开始 执行 bar 
foo() .then (bar); 


在 代码 清单 12.9 中 出 现 了 Deferred 对 象 与 Promise 对 象 。 
转 Deferred 对 象 
Deferred 对 象 是 一 种 具有 unresolved、resolved、rejected 中 的 某 一 种 状态 的 对 象 ， 其 初始 状态 为 
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unresolved。 而 只 要 状态 为 unresolved， 就 不 会 执行 之 后 的 处 理 。 只 有 当 状 态 变 为 resolved 或 rejected 之 
后 ， 才 会 开始 执行 之 后 的 处 理 。 

Deferred 的 内 部 机 制 为 ， 先 注册 回调 函数 ， 并 在 Deferred 对 象 的 状态 发 生变 化 时 执行 该 函数 。 不 过 
在 使 用 Deferred 的 代码 时 ， 不 必 对 其 内 部 实现 方式 在 意 太 多 ， 只 要 知道 它 将 在 某 一 处 理 结束 之 后 执行 下 
一 个 处 理 即 可 。Deferred 就 是 一 种 所 谓 的 用 于 提高 可 读 性 的 机 制 ， 可 以 让 异步 处 理 的 连锁 处 理 以 一 种 简 
单 易 懂 的 源 代码 来 书写 ， 之 后 本 书 将 从 使 用 Deferred 的 角度 来 说 明 。 因 此 ， 虽 然后 续 处 理 实际 上 只 是 一 
种 回调 函数 ， 但 在 这 里 将 会 把 它 称 为 后 续 函 数 。 

国 Promise 对 象 

将 Deferred 对 象 中 的 一 部 分 方法 删除 之 后 ， 就 得 到 了 Promise 对 象 。 如 果 直 接 返 回 一 个 Deferred 对 
象 ， 收 到 对 象 的 函数 可 能 会 随意 修改 其 状态 。 为 了 防止 这 种 情况 而 定义 了 Promise 对 象 。 对 状态 的 管理 
还 是 应 该 由 最 初创 建 了 该 Deferred 对 象 的 所 有 者 来 执行 。 


国 12.9.2 状态 迁移 | 


Deferred 对 象 最 初 的 状态 是 unresolved。 可 以 通过 resolve0) 方法 将 状态 迁移 至 resolved。 同 样 地 ， 可 
以 通过 reject0 方法 将 状态 迁移 至 rejected。 两 者 都 能 够 接收 任意 的 参数 。 这 里 所 指定 的 参数 将 会 在 之 后 
直接 传递 给 后 续 函 数 。 

此 外 还 有 resolveWith0 与 rejectWith0 方法 。 它 们 的 第 1 个 参数 可 以 接收 后 续 函 数 中 的 this 所 引 
对 象 。 第 2 个 参数 则 用 于 接收 将 直接 传递 给 后 续 函 数 的 参数 的 数组 。 

Deferred 对 象 在 进行 了 一 次 状态 迁移 之 后 就 不 能 再 迁移 至 另 一 个 状态 了 。 状 态 的 迁移 只 能 发 生 一 次 。 
另外 ， 可 以 通过 isResolved0 及 isRejected0 方法 对 状态 进行 查询 。 

代码 清单 12.10 是 一 个 使 用 了 状态 迁移 方法 的 示例 。 


| 代码 清单 12.10 ”状态 迁移 方法 


wantiooe Eumecdonl 
var d = $.Deferred() { 
// 将 状态 设 定 为 resolved 
// 指定 3 个 参数 
d.resolve('This is', 'resolved', 'deferred.'); 
| SO0): 
return d.promise(); 
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LE 



























































ba 


CE 
var d = $.Deferred() 
setTimeout (function() { 
// 将 状态 设 定 为 rejected 
// 参数 指定 为 后 续 函 数 中 的 this 与 两 个 参数 
d.rejectwitnh({ 
message: 'This is %s %s' 
}, ['rejected', 'deferred.']); 
), Soo) 
return d.promise(); 














】 


// done () 方法 用 于 指定 在 resolved 时 执行 的 后 续 函 数 
fool adonel(E neering rg 
consoles lo (SS So 59 argl arog2 ES 


Dy 


// fail () 方法 用 于 指定 在 rejected 时 执行 的 后 续 函 数 
bam(O raul(tunetlion(aral arg2 
console.log(this.message, argl, arg2); 


jo 
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/* 
在 console 中 所 显示 的 结果 











第 12 章 库 





This is resolved deferred. 
This is resolved deferred. 


0 


国 12.9.3 后 续 函 数 

















then0 、done()、fail() 、always( 与 pipeO 是 用 于 指定 后 续 函 数 的 方法 。 


围 then()、done()、fail()、always() 


done() 用 于 指定 状态 变 为 


then( 所 指定 的 处 理 则 在 两 种 情况 下 都 会 执行 。then0 的 第 1 个 参数 是 resolved 时 的 处 理 ， 而 秆 
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resolved 时 所 执行 的 处 理 。fail( 用 于 指定 状态 变 为 rejected 时 的 处 理 。 


则 是 rejected 时 的 处 理 。always0 所 指定 的 处 理 在 resolved 与 rejected 这 两 种 情况 下 都 会 执行 。 





这 些 方法 可 以 多 次 执行 。 这 








时 ， 将 会 以 方法 执行 的 顺序 来 执行 后 续 函 数 。 此 外 ， 对 于 状态 


了 resolved 的 Deferred 对 象 ， 在 执行 done() 方法 时 将 会 立即 执行 相应 的 后 续 函 数 。 

















代码 清单 12.11 是 一 个 使 


示例 。 


有 代码 清单 12.11 指定 后 续 函 数 的 方法 


ae Mio) = eharele el 


var d = $.Deferred(); 
setTimeout (function() { 


// 将 状态 设 定 为 rejected 





dreject (foo 


OO 
return d.promise(); 


ps 


foo () 

.done (function(arg) { 
aeonseole log(arsge 

}) 


Ea uneton(ars) 于 
aeonseole log(arsg 
eve tener 
eonsole lomare 
}) 


.always (function(arg) { 
console.log(arg + ' 
}) 


.always (function(arg) { 
console.log(arg + ' 


Dg 


we 
在 console 中 所 显示 的 结果 











foo failure 1 
foo failure 2 
foo complete 1 
foo complete 2 


wi 
国 pipe() 








// 将 'foo01 设 定 为 将 会 传递 至 后 续 函 数 





success 1') 


SUceess 2 


failure 2');，; 


complete 1'); 


complete 2'); 





pipe0) 与 then0 相同 ， 都 会 接收 状态 变 为 resolved 时 的 处 理 与 状态 








不 过 ，pipe() 与 其 他 方法 的 使 用 


方式 有 些 不 同 。 
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和 2 个 参数 





已 经 变 为 


变 为 rejected 时 的 处 理 这 两 个 参数 。 
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pipe() 具有 两 种 功能 。 其 一 是 更 改 参 数 的 值 。 对 于 done0 方法 指定 的 后 续 函 数 ， 将 直接 使 用 Deferred 
对 象 的 resolve0 方法 传 来 的 参数 。 而 通过 pipe0 则 能 够 更 改 这 些 参 数 的 值 (代码 清单 12.12 )。 


| 代码 清单 12.12 ”通过 pipe() 来 改变 参数 的 值 


var d = $.Deferred(); 

var filtered = d.pipe (function(arg) { 
YetuUrn arg * TO00y 

Do 


Q.resolve(100) ; 


filtered.done (function(arg) { 
alert (arg); // => 10000 
}); 


另 一 个 功能 是 Deferred 对 象 链 。 
对 于 done0) 与 fail0， 说 到 底 是 根据 起 始 的 Deferred 对 象 的 状态 来 执行 的 。 试 考虑 代码 清单 12.13 中 


| 代码 清单 12.13 ”通过 done() 执行 后 续 函 数 


vaiooe Eocene 

// 创建 Deferred 对 象 

var d = $.Deferred(); 

// 异步 处 理 

setTimeout (function() { 
aulere (too 
d.resolve (); 

pe oe 

return d.promise(); 





by 


VOSTRO el 

// 创建 Deferred 对 象 

var d = $.Deferred(); 

// 异步 处 理 

setTimeout (function() { 
alert ('bar'); 
d.resolve (); 

OO 

return d.promise(); 





J 

va oD a EUnet 
// 同步 处 理 
alert ('baz'); 

二 


// 将 会 以 foo、baz、baz 的 顺序 显示 提示 

foo () .done (bar) .done (baz) ; 

在 代码 清单 12.13 的 处 理 中 ， 有 人 可 能 会 认为 提示 的 显示 顺序 是 foo、bar、baz， 但 实际 上 却 是 以 
foo、baz、bar 的 顺序 显示 的 。 发 生 这 种 问题 的 原因 是 done() 中 设 定 的 后 续 函 数 最 终 还 是 根据 foo 中 创建 
的 Deferred 对 和 象 的 状态 来 执行 的 。 因 此 ， 在 foo 显示 提示 时 ，bar() 与 baz0 将 以 可 能 执行 的 顺序 执行 。 这 
时 ，bar 将 会 在 1 秒 后 显示 提示 ， 而 与 之 相对 地 ，baz 将 立即 显示 提示 ， 于 是 首先 显示 的 将 是 baz。 这 里 
很 重要 的 一 点 是 ，baz0 并 不 是 在 bar 的 提示 显示 时 才 开 始 执行 ， 它 实际 上 是 在 foo 显示 了 提示 之 后 就 能 
执行 。 也 就 是 说 ， 即 使 在 done() 所 指定 的 后 续 函 数 内 创建 了 新 的 Deferred 对 象 ， 它 也 不 会 影响 到 之 后 的 
后 续 处 理 。 在 这 一 点 上 ，fail()、then()、always0 也 是 一 样 的 。 

而 与 之 相对 地 ， 使 用 pipe() 就 能 够 实现 和 所 预期 的 相同 的 执行 结果 ( 代码 清单 12.14 )。 
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| 代码 清单 12. 14 通过 pipe() 执行 后 续 函 数 

// 将 会 以 foo、bar、baz 的 顺序 显示 提示 

foo() .pipe (bar) .done (baz); 

在 pipe0 之 后 的 处 理 将 会 以 pipeO 所 指定 的 后 续 函 数 所 返回 的 Deferred 对 象 (Promise 对 象 ) 为 基 
准 。 这 即 是 Deferred 对 象 链 。 如 果 pipe() 所 指定 的 后 续 函 数 返回 了 null， 则 会 直接 使 用 前 一 个 状态 的 
Deferred 对 象 。 


国 12.9.4 并 行 处 理 | 


可 以 通过 when0 函数 来 使 后 续 处 理 延 信 至 其 他 多 个 异步 处 理 全 部 完成 之 后 再 执行 。 代 码 清 单 
12.15 是 一 个 例子 。 这 里 虽然 使 用 了 AJAX 函数 ， 不 过 其 实 AJAX 函数 的 返回 值 也 是 一 个 Deferred 对 象 
( Promise 对 象 )。 因 此 即使 不 对 AJAX 子 数 的 参数 指定 回调 函数 ， 也 能 通过 done() 或 fail0 来 指定 通信 结 
束 时 的 处 理 。 

在 代码 清单 12.15 的 例子 中 ， 通 过 AJAX 获取 了 foo 与 bar 两 者 ， 并 会 在 成 功 时 显示 “和 载 人 成 功 ”的 
提示 ， 在 失败 时 显示 “ 载 人 失败 ”的 提示 。 
| 代码 清单 12.15 ”通过 when() 函数 执行 并 行 处 理 

Smwhenl(s get( /too gat( /oar 


.done (function() { 


alert (' 载 入 成 功 '); 




































































}) 
veel (Gea tom 


, alert (' 载 入 失败 ') ; 
由 


在 通过 when( 函数 指定 了 多 个 Deferred 对 象 时 ， 如 果 有 1 个 是 resolved 而 其 他 的 是 rejected 的 话 ， 
将 会 执行 done() 所 指定 的 后 续 函 数 还 是 会 执行 fail0 所 指定 的 后 续 函 数 呢 ? 在 这 种 情况 下 ， 将 会 执行 的 是 
通过 fail() 指定 的 后 续聘 数 。 

通过 done() 指定 的 后 续 函 数 只 有 在 所 有 的 Deferred 对 象 都 是 resolved 时 才 会 执行 。 只 要 有 一 个 是 
rejected 也 会 被 认为 是 整个 都 是 rejected， 而 执行 fail0 所 执行 的 后 续 处 理 。 


























| 12.10 jQuery 插件 


在 jQuery 中 有 各 种 各 样 的 插件 。 插 件 的 开发 很 容易 ， 而 且 还 能 够 简单 地 使 用 他 人 开发 的 插件 ， 这 些 
也 推动 了 jQuery 的 人 气 。 
jQuery 中 的 插件 数量 确实 很 多 。 通 常 所 能 想到 的 用 于 实现 UL 或 某 些 功能 的 插件 基本 上 都 已 存在 。 因 此 
不 需要 自己 开发 插件 ， 在 大 多 数 情况 下 都 只 要 搜索 一 下 即 可 。 可 以 在 下 面 的 URL 搜索 并 获取 jQuery 插件 。 
在 执笔 本 书 时 ， 已 经 发 布 了 约 5700 个 插件 。 从 这 一 数字 也 能 看 出 jQuery 受 欢迎 的 程度 。 
http://plugins.jJquery.com/ 


国 12.10.1 使 用 jQuery 插件 | 


只 要 在 载 人 了 jQuery 库 之 后 再 载 作 插件 的 JavaScript 库 就 能 够 在 jQuery 中 使 用 插件 了 。 本 节 将 以 
Jason Frame 开发 的 插件 tipsy (http://onehackoranother.com/projects/jquery/tipsy/ ) 为 例 ， 对 插件 的 使 用 方 
式 进 行 说 明 。 

tipsy 是 一 个 可 以 在 气泡 式 窗 口中 显示 工具 提示 信息 的 简单 的 插件 。 元 素 的 title 属性 所 设 定 的 值 将 会 
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作为 提示 信息 的 内 容 被 显示 出 来 。 而 根据 具体 的 设 定 ， 还 能 够 显示 其 他 属性 的 值 。 此 外 ， 还 能 够 对 提示 
信息 的 显示 方向 、 以 及 显示 信息 出 现 与 消失 时 的 淡 入 淡出 等 效果 进行 指定 。 
代码 清单 12.16 是 一 个 使 用 了 tipsy 的 代码 示例 。 


















































| 代码 清单 12.16 ”jQuery 插件 的 使 用 示例 


<!IDOCTYPE HTML> 
<htEnmlang = zn CH 
<head> 
<meta charset="UTF-8"> 
<link rel="stylesheet" type="text/css" href="tipsy/stylesheets/tipsy.css" /> 
<1-- 先 要 载 入 jQuery --> 
Son Ee mr SE 
<!-- 在 载 入 了 jQuery 之 后 再 载 入 tipsy 插件 的 文件 --> 
Sempere sy vse rls /em Ei S/S rE 
<script> 


SME re eon 
// 由 于 使 用 了 tipsy 插件 而 可 以 在 jQuery 对 象 中 使 用 插件 定义 的 tipsy 方法 


// tipsy 具体 的 使 用 方法 可 以 参见 其 官方 站 点 说 明 或 其 他 相关 资料 



























































tipsy 的 执行 效果 如 图 12.1 所 示 。 
| 图 12.1 jQuery 插件 的 使 用 示例 
SO on > 


€ 3 © hap://examplecom/ripsysample html D3 








This is foo. 


这 是 bar 的 工具 提示 信息 





This is bar. 位 于 右 侧 显示 。 














辆 12.10.2 创建 jQuery 插件 lL 
可 以 通过 扩展 jQuery.fn 来 创建 jQuery 插件 。jQuery 插件 的 创建 方法 如 代码 清单 12.17 所 示 。 
| 代码 清单 12.17 jQuery 插件 的 模板 


(funeeilom(s 大人 
$.fn.myplugin = function(method) { 


var methods = { 
Tn unecon(optoms) el 
this.myplugin.settings = $.extend({}, this.myplugin.defaults, options) 


return this.each(function() { 
// 初始 化 处 理 
1 
ba 


someMethod: function() { 


// 插件 专 有 的 函数 


} 
if (methods[method]) { 
return methods [method] .apply (this, Array.prototype.slice.call (arguments, 1)); 


} else if {typeof method === 'object' || !method} { 





Q 这 里 有 个 让 人 费解 的 地 方 。 代 码 清单 12.16 是 不 完整 的 ， 像 是 中 途中 断 了 ， 这 与 本 书 一 直 以 来 的 风格 不 同 。 而 且 由 于 代码 
的 缺失 ， 也 无 法 从 代码 中 得 出 下 图 的 结果 。 从 内 容 上 来 说 ， 也 并 没 能 清晰 地 告诉 读者 究竟 应 该 如 何 使 用 该 插件 。 因 而 译 


者 擅自 在 最 后 增加 了 那 一 句 注释 以 帮助 说 明 这 一 情况 。 译 者 注 
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return methods.init.apply (this, arguments); 
} else { 

$.error('Method "' + method + '" does not exsit in myplugin plugin!'); 
} 


} 


$.fn.myplugin.defaults = { 
foeoru ony 


ll 
Ra 
-一 


$.fn.myplugin.settings 
} (jQuery)); 


可 以 像 下 面 这 样 来 执行 该 插件 。 
$('selector') 


Sm dn ue // 设 定 插件 
.myplugin('someMethod'); // 执行 someMethod 


12.11 | 与 其 他 库 共同 使 用 





故 12.11.1 $ 对 象 的 冲突 | 





jQuery 将 会 在 全 局 作用 域 中 创建 jQuery 对 象 与 $ 对 象 。 除 此 之 外 不 会 创建 其 他 多 余 的 对 象 ， 也 不 会 








对 prototype 造成 污染 ， 是 一 个 便于 使 用 的 库 。 不 过 ，$ 这 一 名 称 在 很 多 的 JavaScript 库 中 都 会 用 到 。 


在 JavaScript 中 将 $ 作为 选择 器 函数 来 使 
数 的 习惯 用 法 。 
































最 初 ，Prototype.js 将 $ 当成 Document.getElementById0 的 别名 ， 并 作为 一 种 选择 器 函数 使 用 。 因 此 ， 
日 逐渐 成 为 了 一 种 约定 俗 成 的 做 法 。 和 常常 能 看 到 下 面 这 样 的 $ 函 


























Fh 








function $(element) { 
return document .getElementBylId (element); 
} 


在 Prototypejs 之 后 的 很 多 JavaScript 库 中 ， 也 定义 了 很 多 将 $ 函数 作为 选择 器 使 用 的 方法 。 





























此 ， 如 果 同 时 使 用 了 多 个 库 的 话 ，$ 这 一 名 称 就 很 有 可 能 会 发 生 冲 突 。 例 如 ， 如 果 同 时 使 用 jQuery 与 
Prototypejs，$ 函数 所 引用 的 将 会 是 最 近 被 定义 的 那个 对 象 (代码 清单 12.18 )。 


| 代码 清单 12.18 ”同时 使 用 jQuery 与 Prototype.js 



































<!-- jQuery 在 前 ，Prototype.js 在 后 --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script> 


<script> 

oemte (SD // 将 显示 Prototype 的 $ 函数 
ET 
<!-- Prototype.js 在 前 jQuery 在 后 --> 





<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script> 
<script 

alene(s ye // 将 显示 jQuery 的 $ 函数 


eerie 


国 12.11.2 避免 $ 对 象 的 冲突 | 



































我 们 可 以 在 jQuery 中 通过 noConflict0 方法 来 避免 名 称 冲 突 。 在 使 用 了 noConflict0 方法 之 后 ， 


jQuery 所 定义 的 window.$ 对 象 就 会 被 删除 ， 而 能 够 使 用 原先 被 定义 的 那个 $ 对 象 (代码 清单 12.19 )。 顺 
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便 说 明 一 下 ， 在 Prototypejs 中 没有 用 于 避免 名 称 冲突 的 方法 ， 所 以 只 能 在 jQuery 中 避免 这 一 问题 。 
| 代码 清单 12.19 ”避免 名 称 冲突 


jQuery .noConflict (); // 删除 window.$ 
var $j = jQuery.noConflict (true);  // 同时 删除 window.$ 与 window.jQuery 两 者 。 返 回 值 是 一 个 jQuery 对 象 


通常 并 不 需要 使 用 noConflict(true)。 如 果 自 己 对 window.jQuery 对 象 进行 了 定义 ， 或 者 有 多 个 不 同 版 
本 的 jQuery 共存 ， 可 能 会 要 用 到 这 一 方法 。 不 过 尽 可 能 避免 出 现 这 种 情况 为 好 。 一 方面 没 必要 特意 创建 
一 个 与 jQuery 的 名 称 冲 突 的 对 象 ， 另 一 方面 应 该 也 能 通过 别 的 方法 来 避免 出 现 多 个 版 本 的 jQuery 共存 的 
情况 。 此 外 ， 如 果 window.jQuery 处 于 未 被 定义 的 状态 ， 就 无 法 添加 jQuery 搬 件 。 因 此 ， 如 果 非 要 使 用 
noConflict() 的 话 ， 请 至 多 使 用 其 不 含 参数 的 版 本 。 


12.12 | 库 的 使 用 方法 


为 了 使 用 一 个 库 ， 必 须要 载 人 该 库 的 JavaScript 文件 。 由 于 库 通 常 都 会 使 用 允许 再 次 发 布 的 许可 ， 
此 就 算 将 库 文件 置 于 自己 的 服务 器 上 让 用 户 对 其 进行 访问 也 自然 是 没什么 问题 。 不 过 ， 也 可 不 必 特 意 将 
库 放 在 自己 的 服务 器 上 ， 而 可 以 通过 Google Libraries API 来 读 取 JavaScript 库 。 

http://code.google.com/apis/libraries/ 

Google Libraries API 是 一 个 JavaScript 的 内 容 分 发 网 络 ( CDN )。 由 于 这 是 Google 提供 的 服务 ， 因 此 
几乎 不 会 有 任何 网 络 或 服务 器 故障 ， 至 少 会 比 自己 准备 的 服务 器 或 网 络 可 靠 性 更 高 。 

表 12.9 总 结 了 执笔 本 书 时 Google Libraries API 所 提供 的 JavaScript 库 。 其 中 几乎 包含 大 部 分 著名 的 
JavaScript 库 。 















































































































































表 12.9 在 Google Libraries API 中 提供 的 JavaScript 库 



















































































































































































库 说 明 
Chrome Frame 对 是 否 安装 了 Google Chrome Frame ( 能 够 使 Internet Explorer 的 执行 引擎 实现 与 Google Chrome 
相同 效果 的 插件 ) 进行 确认 的 库 
Dojo 全 栈 式 框架 的 JavaScript 库 
Ext Core Ext JS 的 核心 部 分 。Ext JS 是 一 个 以 丰富 的 UI 组件 为 特点 的 库 
jQuery 其 特点 为 通过 链 式 语法 实现 以 简单 的 代码 对 DOM 进行 操作 
jQuery UI 在 jQuery 的 基础 上 添加 UI 效果 和 UI 组 件 的 库 
MooTools 针对 中 高 级 开发 人 员 设计 的 轻 量 级 库 
Prototype.js 最 早 流行 的 JavaScript 库 
script.aculo.us 在 Ptototype 的 基础 上 添加 了 动画 等 UI 效果 的 库 
SWFObject 将 Adobe Flash 嵌入 HTML 的 库 
YUI Library Yahool 提供 的 全 栈 式 框架 的 话 
WebFont Loader 使 用 Web 字体 的 话 
不 仅 Google，Microsoft 也 提供 了 同样 的 CDN 服务 ,不 过 在 其 CDN 中 只 提供 了 jQuery 这 一 个 库 。 























因此 ， 如 果 要 使 用 jQuery 以 外 的 库 的 话 ， 应 该 选择 Google Libraries API。 

此 外 还 有 一 个 名 为 cdnjs.com 的 CDN 服务 ,提供 了 在 表 12.9 中 没有 被 记载 的 库 。 该 服务 用 于 提供 那 
些 Google 的 CDN 中 没有 提供 的 不 那么 著名 的 库 。 如 果 和 希望 通过 CDN 来 使 用 最 近 新 出 现 的 库 的 话 ， 可 以 
试 着 在 这 里 寻找 一 下 。 


http://www.cdnjs.com 
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本 部 分 介绍 HTML5 这 一 由 W3C 制定 的 标准 及 其 
相关 技术 。 其 中 ， 将 会 重点 解说 在 HTML5 繁杂 
的 标准 中 ， 那 些 将 会 对 今后 的 JavaScript 开发 产 
生 重 大 影响 的 API。 
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我 们 首先 概述 HTML5。 本 章 的 目的 是 理解 HTML5 的 制定 背景 以 及 现状 ， 以 期 在 整体 上 把 握 
其 所 提供 的 新 功能 。 


13.1 | HTMLS 的 历史 





国 HTML5 的 发 展 历程 | 


我 们 先 简单 回顾 一 下 HTMLS5 至 今 的 发 展 历程 。 在 第 1 章 中 已 经 对 JavaScript 的 历史 做 了 介绍 。 与 前 
几 年 相 比 ， 浏 览 器 中 所 采用 的 JavaScript 实现 性 能 大 为 提升 ， 于 是 浏览 器 也 成 为 了 一 个 应 用 程序 平台 ， 而 
受到 了 人 们 的 瞩目 。 

随 着 Web 应 用 程序 的 范围 越 来 越 广 ，JavaScript 的 功能 局 限 性 也 渐渐 引起 了 人 们 的 注意 。 仅 靠 
JavaScript 无 法 实现 数据 的 永久 保存 、 套 接 字 通信 、 音 乐 与 视频 的 播放 等 在 桌面 应 用 程序 中 常见 的 功能 ， 
于 是 在 一 些 特定 领域 ，Web 应 用 程序 的 发 展 要 慢 于 桌面 应 用 程序 。 
国 浏览 器 插件 的 普及 

在 此 之 前 ， 为 了 弥补 JavaScript 所 缺少 的 功能 ， 采 用 的 是 Flash 或 Silverlight 等 插件 。 也 就 是 说 ， 尽 
管 有 这 样 的 需求 ， 但 这 些 功 能 并 没有 被 作为 浏览 器 的 标准 功能 被 提供 。 

即使 如 此 ， 如 果 有 浏览 器 开发 商 率 先 实现 了 某 一 个 新 的 功能 ， 但 没 能 在 所 有 的 主流 浏览 器 中 得 到 支 
持 的 话 ， 这 一 服务 还 是 不 能 得 到 进一步 利用 。 因 此 ， 从 功能 扩充 的 角度 来 说 ， 在 很 长 一 段 时 间 里 ,仍然 
需要 在 浏览 器 中 安装 Flash 及 Silverlight 等 插件 。 
图 统一 的 浏览 器 标准 的 制订 

HTMLS 就 是 在 那些 不 满 于 现状 的 浏览 器 开发 商 的 共同 合作 下 诞生 的 。 为 了 更 有 效率 地 实现 功能 的 扩 
展 ， 必 须要 有 统一 的 标准 。 

但 是 ， 现 在 广泛 普及 的 HTML 的 标准 制定 止 于 1999 年 W3C2 所 推荐 的 HTML4.01 版 本 。 虽 然 W3C 
对 XHTML 的 普及 付出 了 很 多 的 努力 ， 但 最 终 XHTML 并 没 能 像 预期 的 那样 得 到 普及 。 因 此 ， 对 W3C 
的 方式 怀 有 不 满 的 Apple 、Mozilla 、Opera 成 立 了 名 为 WHATWG? 的 社区 。WHATWG 的 目的 是 通过 与 当 
前 Web 发 展 状 况 相 适 应 的 方法 ， 制 订 与 Web 相关 的 技术 标准 ， 并 将 其 反馈 给 W3C。 
国 HTML5 标准 制订 的 起 步 

在 历经 这 一 发 展 阶 段 后 ，W3C 终于 与 WHATWG 开始 了 人 合作， 制订 HTML5 的 标准 ， 并 在 2008 年 1 
月 22 日 发 表 了 第 一 份 HTML5 草案 。 在 执笔 本 书 时 ， 最 终 版 本 的 草案 (2011 年 5 月 25 日 ) 已 发 表 , 今后 
W3C 将 按照 下 面 的 进程 逐步 使 HTML5 成 为 推荐 标准 ， 并 以 2014 年 完成 这 一 推荐 为 目标 。 

@ 草案 ( Working Draft ) 































































































































































































中 W3C (World Wide Web consortium ) 是 一 个 推进 WWW 中 所 使 用 的 各 种 技术 的 标准 化 的 团体 ( http://www.w3.org/ ) 


©® http://www.whatwg.org/ 


图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 


第 13 章 HTML5 概 要 一 一 一 247 @ 


@ 最 终 草案 ( Last Call Working Draft ) 

@ 推荐 候选 ( Candidate Recommendation ) 
@ 推荐 方案 ( Proposed Recommendation ) 
@ 推荐 ( Recommendation ) 


| 13.2 | HTMLS5 的 现状 





国 13.2.1 浏览 器 的 支持 情况 | 


国 PC 

当前 ， 针 对 PC 的 浏览 器 市 场 正 处 于 一 种 Internet Explorer (IE )、Firefox 、Chrome 、Safari 及 Opera 
等 浏览 器 在 相互 争夺 份额 的 情况 。 如 果 希 望 在 这 些 针 对 PC 的 浏览 器 中 提供 使 用 了 HTMLS5 的 服务 的 话 ， 
需要 注意 一 个 问题 ， 即 正 (6、7、8 ) 几乎 不 支持 任何 的 HTMLS 的 相关 功能 ， 并 且 它 们 的 市 场 占有 率 相 
当 高 ， 让 人 无 法 忽略 。 

Microsoft 声称 将 从 IE9 开始 加 强 对 HTMLS5 的 支持 ， 并 且 也 确实 在 正 9 中 实现 了 很 多 的 HTMLS5 的 
相关 功能 。 在 执笔 本 书 时 ， 正 10 的 预览 版 也 已 公开 。 不 过 就 此 前 的 趋势 来 看 ， 旧 版 本 的 下 的 市 场 份额 还 
需要 很 长 的 时 间 才 会 降低 到 忽略 不 计 的 程度 吧 。 

因此 ， 如 果 要 通过 HTML5 来 提供 针对 PC 的 服务 的 话 ， 则 需要 区 分 不 同 的 浏览 器 。 但 是 ， 在 这 种 情 
况 下 ， 检 查 浏览 器 的 种 类 或 版 本 等 并 替换 处 理 方 式 的 做 法 不 易 管理 ， 所 以 通常 会 在 执行 JavaScript 时 判断 
所 需 功能 是 否 被 支持 以 选择 相应 的 处 理 方式 。 目 前 ， 可 以 通过 Modernizr 等 工具 能 够 实现 这 一 功能 。 

转 智能 手机 

如 果 将 目标 限定 于 智能 手机 ， 人 情况 将 与 PC 有 很 大 的 不 同 。 之 所 以 这 样 说 ， 是 因为 市 场 份额 正在 迅 
速 增加 的 iOS 与 Android 这 两 个 针对 智能 手机 的 OS 都 默认 使 用 了 基于 WebKit” 的 浏览 器 。 特 别 是 在 日 
本 , iOS 与 Android 占据 了 非常 高 的 市 场 份额 ">， 所 以 只 要 对 WebKit 提供 了 支持 ,就 能 够 支持 几乎 所 有 的 
智能 手机 了 。 

因此 ， 在 开发 针对 智能 手机 的 Web 应 用 程序 时 ， 几 乎 不 需要 考虑 跨 浏览 器 支持 的 问题 。 甚 至 可 以 
说 ， 智 能 手机 是 现在 最 容易 进行 HIML5 开发 的 领域 。 

国 电视 机 

并 不 是 只 有 PC 与 智能 手机 才 会 安装 浏览 器 。 现 在 日 本 厂商 制造 的 很 多 电视 机 中 都 装 有 基于 NetFront 
这 一 针对 租 入 式 设备 设计 的 浏览 器 的 定制 版 浏览 器 。 目 前 这 些 浏 览 器 几乎 还 不 支持 HTML5 相关 的 功能 。 

最 近 索 尼 终 于 在 其 电视 机 中 预 置 了 Opera 浏览 器 ， 以 此 为 开端 ， 使 用 HTML5 的 功能 强大 的 Web 应 
用 程序 开发 环境 也 日 趋 成 熟 。 加 上 Apple TV 与 Google TV 等 产品 的 开发 ， 电 视 机 浏览 器 这 一 领域 今后 的 
动向 也 受到 了 人 们 的 有 瞩目“。 





















































































































































QD http://modernizr.com/ 

@ WebKit ( http://www.webkit.org/ ) 是 以 苹果 公司 为 中 心 所 开发 的 开源 HTML 泻 染 引擎 。 被 Safari 或 Google Chrome 等 很 
多 的 浏览 器 所 使 用 

@ 事实 上 ， 在 包括 中 国 在 内 的 全 球 范围 内 都 是 如 此 。 译 者 注 

@ 尽管 NetFront 浏览 器 被 用 于 包括 曾经 流行 过 的 Plam OS、Windows CE 以 及 一 些 日 本 厂商 所 开发 的 游戏 主机 在 内 的 各 种 设 
备 中 ， 但 现在 它 在 日 本 以 外 的 市 场 中 并 没有 被 广泛 使 用 。 现 在 最 新 的 4.2 版 本 的 NetFront 浏览 器 已 经 对 HTML5 提供 了 一 
定 程度 的 支持 ， 而 一 些 基 于 Android 系统 的 Google TV 设备 也 采用 了 WebKit 核心 的 浏览 器 。 此 外 ， 目 前 国内 的 智能 电视 
采用 的 也 主要 是 WebKit 核心 的 浏览 器 。 译 者 注 
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国 13.2.2 Web 应 用 程序 与 原生 应 用 程序 | 


HTML5 一 词 似 乎 已 经 成 了 一 句 流 行 语 ， 在 不 同 场 合 下 这 个 词 所 指 的 范围 也 各 有 不 同 。 有 时 HTML5 
仅 被 用 来 表示 严格 包含 于 W3C 的 HTMLS5 标准 中 的 内 容 ， 不 过 在 本 书 中 ，HTMLS5 代表 了 更 为 广泛 的 内 
容 。 最 近 ， 为 了 使 原生 应 用 程序 可 以 做 到 的 功能 在 浏览 器 中 也 能 够 被 实现 ， 出 现 了 大 量 的 扩展 功能 。 在 
本 书 中 ， 将 把 这 些 浏览 器 的 扩展 功能 统称 为 HTML5。 

从 Gmail 开始 ,已 经 出 现 了 很 多 以 Web 应 用 程序 的 形式 提供 的 实用 程序 。 与 过 去 相 比 ， 使 用 原生 应 
用 程序 的 机 会 少 了 很 多 。 而 最 近 的 浏览 器 甚至 实现 了 3D 图 形 的 泻 染 功能 ， 这 一 势头 让 人 不 禁 觉 得 总 有 
一 天 所 有 的 程序 都 会 改 以 Web 应 用 程序 的 形式 存在 了 吧 。 

不 过 ， 无 论 浏览 器 的 扩展 功能 如 何 发 展 ， 只 要 浏览 器 还 是 一 种 原生 应 用 程序 ， 它 在 能 够 实现 的 功能 
方面 就 不 会 有 什么 优势 。 即 使 如 此 ， 支 持 将 浏览 器 作为 一 种 应 用 程序 平台 也 是 有 其 理由 的 ， 其 中 之 一 就 
是 开发 的 成 本 问题 。 

例如 ， 通 常情 况 下 在 针对 智能 手机 的 原生 应 用 开发 中 都 需要 使 用 OS 开发 商 所 发 布 的 SDK。 大 致 说 
来 ， 就 是 对 于 iOS 终端 主要 使 用 Objective-C、 对 于 Android 设备 主要 使 用 Java、 对 于 Windows Phone 72 
设备 则 会 使 用 C# 或 Visual Basic 以 进行 开发 。 在 程序 设计 语言 与 SDK 的 学 习 、 应 用 程序 的 实现 、 今 后 
的 后 续 修 改 等 方面 ， 所 花费 的 成 本 将 会 与 需要 文 持 的 平台 数量 成 比例 上 升 。 

而 Web 应 用 程序 正 是 解决 这 一 领域 问题 的 最 佳 方案 。 通 过 HTML/CSS/JavaScript 开发 的 Web 应 用 程 
序 能 够 通过 浏览 絮 运 行 于 所 有 的 智能 手机 上 。 在 目前 的 智能 手机 应 用 开发 中 ，Web 应 用 程序 几乎 可 说 是 
实现 跨 平台 支持 的 唯一 手段 。 
























































































































































































































































| 13.3 | HTMLS 的 概要 


W3C 为 了 使 HTML5 得 到 广泛 普及 而 为 它 提供 了 各 种 图 标 ”。 使 用 了 HTMLS5 及 其 相关 技术 的 页 面 或 
应 用 程序 将 显示 其 徽标 以 对 HTML5 的 使 用 进行 宣传 。 通 过 在 徽标 中 列 出 具体 的 图 标 还 可 以 明确 地 标识 
出 其 中 具体 使 用 了 哪些 技术 ( 图 13.1 )。 

提供 了 这 些 图 标的 站 点 将 图 标 与 相对 应 的 HIMLS 及 其 相关 技术 分 成 了 8 大 类 ， 以 使 人 们 能 对 
HTML5 所 提供 的 功能 有 一 个 整体 的 把 握 。 本 节 将 对 此 作 简 单 介 绍 。 表 13.1 总 结 了 各 个 图 标 所 表示 的 技 
术 领 域 。 表 13.2 总 结 了 一 些 与 HTML5 有 关 的 重要 的 JavaScript API 及 其 简单 说 明 。 

与 HTML5 相关 的 功能 不 仅仅 是 JavaScript， 还 包括 了 HTML、DOM、CSS 等 领域 ,不 过 本 书 无 
法 包含 以 上 所 有 内 容 ， 本 书 将 只 选择 与 HTML5 相关 的 JavaScript API， 尤 其 是 其 中 被 认为 会 对 今后 的 
JavaScript 开发 产生 巨大 影响 的 部 分 进行 说 明 。 


图 13.1 HTML5 徽标 ( 全 套 ) 


日 sn 


四 及 Windows Phone 8。 译 者 注 
@ http://www.w3.org/html/logo/ 
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表 13.1 HTML5 及 其 相关 技术 的 分 类 
































类 别 说 明 

CONECTIVITY WebSocket、Server-Sent Event 等 

CSS3 CSS3、Web Fonts 等 

DEVICE ACCESS 位 置信 息 、 加 速度 传感器 等 

3D GRAPHICS & EFFECTS SVG、Canvas、WebGL 等 

MULTIMEDIA Audio 标签 、Video 标签 等 

PERFORMANCE & INTEGRATION Web Workers、XHR2 等 

SEMANTICS microdata、microformats、 轮 廓 元 素 的 添加 等 

OFFLINE & STORAGE ApplicationCache、localStorage、IndexedDB、File AP| 等 








表 13.2 HTML5 相关 API 一 览 




























































































API 名 称 功能 说 明 

Video/Audio 视频 或 音频 播放 
Canvas 2D 图 形 绘 制 

WebGL 3D 图 形 绘 制 

Web Messaging 窗口 间 的 数据 收发 
WebSocket 与 服务 器 双向 通信 
Server-Sent Events 来 自 服务 器 的 数据 推送 
Web Workers 后 台 处 理 

Web Storage 简单 的 键 值 存 储 
Indexed Database 功能 强大 的 键 值 存储 
Web SOL Database 功能 强大 的 关系 数据 库 
File API 对 文件 系统 的 访问 
Drag and Drop 拖 放 操 作 

Geolocation API 获取 当前 位 置信 息 
Application Cache 对 缓存 文件 的 控制 
History API 对 浏览 器 历史 的 操作 

















专栏 


浏览 器 开发 商 的 HTML5 信息 门户 站 点 

与 HTML5 相关 的 API 的 标准 已 经 由 W3C 公布 ， 本 书 也 在 对 各 API 介绍 时 附 上 了 W3C 的 相关 页 面 链接 。 
一 般 来 说 ， 参 考 W3C 的 标准 就 不 会 有 错 了 ， 不 过 在 实际 开发 中 ， 有 很 多 功能 即使 读 了 标准 也 很 难 理解 其 概念 。 
在 这 种 情况 下 ,我 推荐 大 家 参考 一 下 各 个 浏览 器 开发 商 所 提供 的 HTML5 相关 信息 的 综合 门户 站 点 。 这 些 
站 点 上 会 公开 一 些 实际 能 够 执行 的 演示 程序 , 与 W3C 提供 的 标准 相 比 , 能 够 更 容易 地 获取 一 些 实际 实现 的 代 
码 。 此 外 ， 很 多 时 候 浏 览 器 的 具体 实现 会 与 W3C 的 标准 有 所 不 同 ( 例如 开发 商 前 缀 等 )， 这 时 就 只 能 从 这 些 
站 点 获取 这 类 浏览 器 自 带 的 信息 了 。 
首先 通过 这 些 开 发 商 提供 的 门户 站 点 页 面 掌握 功能 的 概要 , 之 后 阅读 W3C 的 标准 , 将 有 助 快 的 
理解 。 表 A 总 结 了 主要 的 浏览 器 开发 商 所 提供 的 HTML5 信息 门户 站 点 。 


































































































































































































































































































































































































表 A 各 浏览 器 开发 商 的 HTML5 信息 门户 站 点 ” 

















页 面 名 称 
Microsoft IE Test Drive http://ie.microsoft.com/testdrive/ 
Mozilla MDN HTML5 https://developer.mozilla.org/zh—-CN/docs/HTML/HTMLS5 
Google HTML5 Rocks http:/www.html5rocks.com/ 
Apple HTML5 Showcase http:/www.apple.com/htmls/ 
Opera Dev.Opera > open web http://dev.opera.com/articles/tags/open%20web/ 





























QD 原 书 中 有 部 分 站 点 的 URL 不 是 最 新 版 ， 这 里 已 更 新 为 最 新 的 URL。 译 者 注 
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Web 应 用 程序 


本 章 将 讲解 Web 应 用 程序 的 URL 管理 以 及 离线 支持 ， 并 阔 述 使 用 了 HTML5 标准 中 新 加 入 的 
History API 及 ApplicationCache 的 更 为 高 级 的 Web 应 用 程序 开发 方法 。 


14.1 History API 





国 14.1.1 History API 的 定义 | 


History API" 是 用 于 在 JavaScript 中 对 浏览 器 的 URL 及 历史 信息 进行 操作 的 API。 过 去 ， 大 部 分 的 
Web 应 用 程序 都 是 由 服务 器 端 负责 程序 逻辑 ， 客 户 端 则 主要 负责 信息 显示 。 而 最 近 ， 将 复杂 的 状态 变化 
移 至 客户 端 进行 管理 的 Web 应 用 程序 多 了 起 来 。 由 于 在 客户 端 通过 AJAX 方式 更 新 内 容 时 不 会 改变 页 面 
的 URL， 因 此 必须 通过 JavaScript 对 URL 进行 管理 以 始终 应 对 页 面 的 状态 变化 。 

然而 ， 如 果 只 是 改写 页 面 的 URL， 就 将 会 发 生 页 面 跳 转 ， 且 JavaScript 的 状态 也 会 在 这 时 被 重 置 。 
于 是 出 现 了 History API。 如 果 使 用 History API， 就 能 够 在 不 发 生 页 面 跳 转 的 情况 下 将 URL 路 径 赫 换 为 任 
意 内 容 。 


国 14.1.2 哈 希 片段 | 


国 AJAX 应 用 程序 与 哈 希 片段 

原本 URL 的 作用 是 用 于 唯一 识别 Web 上 的 某 一 内 容 。 然 而 对 于 运用 了 AJAX 技术 的 页 面 来 说 ， 即 
使 不 进行 页 面 跳 转 也 能 够 自由 地 改写 页 面 内 容 。 此 时 如 果 无 法 对 URL 进行 有 序 的 管理 ， 则 可 能 会 出 现 同 
一 个 URL 表示 了 完全 不 同 的 内 容 的 情况 。 

正如 不 存在 没有 地 址 栏 的 浏览 器 ，UREL 与 Web 应 用 程序 也 是 不 可 分 割 的 概念 。 如 果 URL 无 法 履行 
其 唯一 识别 Web 内 容 的 这 一 原本 的 功能 的 话 ， 浏 览 器 的 书签 功能 就 将 失效 ， 而 使 用 外 部 内 容 的 链接 也 将 
成 为 一 个 难题 。 

为 了 解决 这 一 问题 ， 现 在 很 多 的 AJAX 应 用 程序 都 采用 了 哈 希 片段 (URL 中 # 之 后 的 字符 串 ) 这 一 
方式 。 由 于 哈 希 片段 使 用 的 就 是 页 面 内 的 链接 ， 因 此 即使 改写 了 哈 硕 片段 也 不 会 发 生 页 面 跳 转 ( 向 服务 
器 发 送 请 求 ) 利用 这 一 机 制 以 哈 希 片段 来 表示 页 面 的 状态 后 ， 就 能 够 以 唯一 的 URL 来 表示 应 用 程序 的 
特定 状态 了 。 

代码 清单 14.1 是 哈 希 片段 的 使 用 示例 。 在 这 个 例子 中 ， 哈 硕 片 段 代 表 了 正在 浏览 的 页 面 的 页 码 信 
息 。 需 要 注意 的 是 ， 这 里 的 updateContent 被 假定 为 一 个 实现 了 对 内 容 进行 更 新 处 理 的 函数 。 

上 代码 清单 14.1 哈 希 片段 的 使 用 示例 


function gotoPage (num) { 
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OD http://www.w3.org/TR/html5/history.html 
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// 更 新 内 容 


updateContent (num) ; 


// 将 当前 状态 保存 至 哈 希 片段 


location.hash = '#!page=' + num; 





} 
// 状态 的 恢复 


window.onhashchange = function() { 
// 从 蛤 希 片段 中 获取 状态 


var num = location.hash.match(/#!page=([0-9] +)/) [1]; 


// 更 新 内 容 


} updateContent (num); 
根据 规则 ， 在 起 始 处 添加 了 # 之后， 该 字符 串 就 将 会 被 识别 为 哈 希 片段 。 不 过 最 近 对 于 上 面 的 示例 ， 
jj 了”#!(hashbang, shebang)” 形 式 的 情况 也 在 增加 。 

出 现 这 种 情况 的 理由 大 致 有 以 下 两 个 : 其 一 ， 这 样 一 来 ， 就 能 够 将 哈 希 片段 区 别 于 过 去 被 用 于 页 对 
内 链接 的 # 字符 串 。 另 一 个 理由 则 更 为 重要 ， 即 Google 提出 了 一 种 机 制 ， 提 议 在 搜索 引擎 等 的 网 络 蝴 蛛 
中 将 ” 夫 ” 之 后 的 内 容 识 别 为 AJAX 应 用 程序 的 状态 以 进行 处 理 。 

国 哈 希 片段 与 网 络 蜘蛛 
使 用 哈 希 片段 的 AJAX 应 用 程序 有 一 个 问题 ， 即 之 前 提 到 的 不 能 很 好 地 支持 搜索 引擎 等 的 网 络 蜂 蛛 。 
通常 网 路 师 蛛 不 会 对 应 用 程序 中 包含 的 JavaScript 进行 解读 ， 所 以 无 法 在 获取 页 面 后 抓 取 通过 JavaScript 
动态 载 人 的 内 容 。 因 此 ， 为 了 让 网 络 蜘蛛 能 够 收集 页 面 的 内 容 ， 则 必须 在 服务 器 端 识别 网 络 蜂 蛛 的 访问 ， 
并 返回 不 包含 JavaScript 的 静态 内 容 。 
然而 URL 中 哈 希 片段 的 部 分 不 会 和 请 求 一 起 发 送 给 服务 器 。 也 就 是 说 ， 服 务 器 无 法 返回 与 哈 希 片段 
所 表示 的 应 用 程序 状态 相对 应 的 合适 内 容 ， 于 是 ， 网 络 蜘蛛 也 就 无 法 正确 获取 URL 原本 指示 的 内 容 。 
为 了 处 理 这 个 问题 ，Google 提出 了 一 种 网 络 蜂 蛛 的 工作 机 制 。 即 网 络 蜂 蛛 将 会 把 含有 提 的 URL 识 
别 为 AJAX 应 用 程序 ， 并 将 ## 蔡 换 为 ? escaped fragnemt 这 一 参数 后 访问 服务 器 。 


// Web 中 通常 使 用 的 URL 
http://www.example.com/#!/foo0/bar 
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// Google 的 网 络 蜘蛛 所 访问 的 URL 
http://www.example.com/? escaped fragment =/foo/bar 
如 果 遵 守 这 一 规则 ， 只 要 在 服务 器 端 将 含有 _escaped fragment 参数 的 请 求 识别 为 来 自 于 网 络 蜂 蛛 
的 访问 ， 就 能 够 根据 该 参数 所 示 的 状态 发 出 相应 的 静态 内 容 。 
直 以 来 ， 对 于 URL 的 处 理 有 着 很 多 争论 。 随 着 AJAX 应 用 程序 的 迅速 普及 ， 也 出 现 了 很 多 质疑 
声 ， 他 们 担心 以 与 原本 不 同 的 方式 来 使 用 哈 希 片段 是 否 妥 当 。 而 History API 正 是 一 种 可 以 巧妙 地 解决 这 
些 与 URL 和 AJAX 应 用 程序 相关 的 问题 的 API。 


转 14.1.3 接口 | 


在 History API 中 会 用 到 的 主要 内 容 有 history 对 象 与 popstate 对 象 。history 对 象 是 window 对 象 所 有 具 
有 的 一 个 属性 ， 用 于 对 历史 记录 进行 操作 。popstate 事件 将 会 在 巡 览 页 面 历史 时 被 触发 ， 因 此 可 以 侦 听 
popstate 事件 ， 并 实现 一 些 用 于 恢复 页 面 状态 的 处 理 。 
众所周知 ， 我 们 可 以 通过 JavaScript 的 location 对 象 以 跳 转 至 特定 的 页 面 (代码 清单 14.2 )。 如 果 不 
希望 发 生 页 面 跳 转 就 能 够 显示 特定 内 容 ， 则 可 以 使 用 之 前 介绍 的 使 用 了 哈 硕 片段 以 在 URL 中 保存 页 面 状 
态 的 方法 (代码 清单 14.3 )。 
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| 代码 清单 14.2 
// 发 生 





通常 的 URL 更 新 
了 指向 /search/foo 的 页 面 跳 转 


location.href 


'/search/foo'; 


| 代码 清单 14.3 ”使 用 了 哈 希 片段 的 URL 更 新 
// 以 AJAX 的 方式 获取 /search/foo 的 内 容 


updateContent ( 
// 将 哈 希 片段 更 


n 





location.has 


此 时 不 会 发 生 





Mseareh/toon, 
改 为 #1!/search/foo 
'#!/search/foo0'); 


看 跳 转 。 此 外 ， 





页 























周 。 


| 代码 清单 14.4 ”使 用 pushState 更 新 URL 
// 以 AJAX 的 方式 获取 /search/foo 的 内 容 并 显示 


updateContent ( 


'/search/foo0'); 


// 将 URL 更 改 为 /search/foo 


nistory Pushstatel(nul 








-~ 








品 








第 2 个 参数 所 指 
合 ， 根 据 需 要 从 浏 


定 的 是 页 面 的 标题 。 在 这 


还 可 以 通过 history 对 象 的 pushState 方法 ， 以 在 不 使 月 
况 下 将 URL 更 新 为 合适 的 状态 (代码 清单 14.4 )。 通 过 将 URL 指 

能 够 在 不 向 服务 器 发 送 请 求 的 情况 下 更 改 URL。 而 如 果 指 定 了 完整 路 径 ， 则 应 
第 16 章 的 专栏 ) 的 限 


'foo 的 搜索 结果 














亚 不 


























日 哈 希 片段 的 情 
定 给 pushState 方法 的 第 3 个 参数 ， 就 
当 遵 守 同 源 策略 ( 请 参见 














", /search/fo0'); 








P 第 1 个 参数 所 指定 的 是 用 于 表示 页 面 











状态 的 详细 信息 的 对 象 。 本 节 将 在 之 后 详细 说 明 该 参数 。 

















指定 的 值 ， 可 以 在 诸如 显示 浏览 器 的 页 面 浏览 历史 记录 等 场 





览 器 中 引用 。 


国 页 面 历 史记 录 的 跳 转 


1 
yh 








可 以 通过 浏 








器 的 后 退 键 以 及 前 进 键 遍历 浏 








MIA 


览 日 








器 所 管理 





的 页 面 历 














史记 录 。 也 可 以 通过 history 对 象 的 








back 方法 与 forward 方法 ， 实 现 以 JavaScript 来 进行 页 面 历史 记录 的 跳 转 。 此 外 ， 还 可 以 使 用 go 方法 以 


参数 所 指定 的 步 数 在 历史 记录 中 向 前 或 向 后 跳 转 ， 不 过 一 般 情况 下 这 种 方法 并 不 常 


一 个 例子 。 





| 代码 清单 14.5 ”页 面 历史 记录 的 跳 转 











// 在 历史 记录 中 


maseory Baek 


必得 


历史 记录 中 前 


























mstory Eorwarsdl 











| 








// 在 历史 记录 
hstory oo 


后 退 1 次 ( 等 同 于 浏览 器 的 后 
Ta 于 全 于 浏览 筑 器 的 前 说 
后 退 2 次 


到 


国 页 面 状态 的 恢复 














在 遍 览 通过 pushState 添加 的 页 面 历 史记 录 时 通常 不 会 发 9 




















j。 代 码 清单 14.5 是 





退 键 ) 











键 ) 











恢复 处 理 进 行 实现 











。 有 具体 来 说 ,上 日 




















些 用 于 将 页 
页 面 


~ 





























该 











// 侦 听 页 丁 








YY 


var pat 


外 更 新 为 1 
i 所 显示 的 内 容 应 当 是 与 URL 相对 应 的 ， 因 此 ， 在 对 popstate 事 
民 据 URL 来 执行 恰当 站 
| 代码 清单 14.6 ”popstate 
历史 记录 的 跳 
window.onpopstate 


分 解 URL 路 径 


nnames 





验 当 状态 的 处 理 。 


事件 的 实现 示例 
转 


met 
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图 灵 社 区 


日 于 这 时 popstate 


内 容 绘制 处 理 。 代 码 清单 14.6 是 一 个 简化 的 popstate 


location.pathname .substzing ( 

















E 页 面 跳 转 ， 因 此 有 必要 独自 对 页 面 状态 的 
有 件 将 被 触发 ， 因 此 可 以 侦 听 popstate 事件 ， 并 实现 一 
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有 件 进 行 实现 时 ， 基 本 要 点 在 于 应 


事件 的 实现 示例 。 
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IT) Spl /0D 


会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 
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// 引用 项 层 的 路 径 名 并 显示 合适 的 内 容 
switch (pathnames [0]) { 
oases tu 
/* 显示 列表 页 面 */ 
case 'search': 


/* 显示 搜索 页 面 */ 


























时 


转 恢复 更 为 详细 的 页 面 状态 
URL 所 能 保存 的 信息 量 是 非常 少 的 。 通 常 的 URL 都 不 会 包含 诸如 “ 跳 转 目标 的 URL” 这 样 的 跨 页 
面 信息 ， 或 是 “层级 树 的 开 闭 状态 ”这 样 的 非常 细节 的 页 面 状 态 信 息 。 可 以 借助 pushState 的 第 1 个 参 
数 , 来 管理 比 URL 所 能 保存 的 信息 更 为 详细 的 页 面 状 态 。 
例如 ， 试 考虑 不 希望 在 某 一 页 面 中 显示 用 于 返回 跳 转 目标 的 链接 的 情况 。 这 时 跳 转 目标 的 URL 或 标 
题 等 信息 是 必需 的 ， 但 通过 URL 来 保存 所 有 这 些 信 息 并 不 是 很 讨 巧 的 做 法 。 应 该 像 代 码 清 单 14.7 这 样 ， 
将 这 些 信 息 传 递 给 pushState 的 第 1 个 参数 。 


| 代码 清单 14.7 ”对 详细 状态 的 管理 
// 跳 转 目标 的 信息 


var data = { 
// 跳 转 目标 的 标题 
prev title: document.title, 
// 跳 转 目标 的 URL 


prev url: location.pathname 
























































































































































ba 


// 将 信息 传递 给 第 1 个 参数 
nistory pushSstatel(dactean nom /foo/bar 吃 尼 


可 以 通过 history.state 属性 来 引用 传递 给 pushState 的 第 1 个 参数 的 信息 。 不 过 这 个 功能 是 在 最 近 的 更 









































新 中 出 现 的 ， 虽然 在 Firefox4 以 及 更 新 的 浏览 器 中 得 到 了 实现 ， 在 Chrome13 中 还 未 被 实现 ， 对 此 请 加 以 
注意 "。 
根据 原本 的 标准 ， 只 能 从 popstate 事件 对 象 中 引用 state。 然 而 由 于 在 页 面 重 载 时 并 不 会 发 生 popstate 


















































事件 ， 因 此 根据 这 一 规则 ， 无 法 在 页 面 重 载 时 引用 state 并 恢复 页 面 的 状态 。 
代码 清单 14.8 通过 history.state 引用 了 传递 给 pushState 的 第 1 个 参数 的 信息 (代码 清单 14.7 ) 并 以 此 绘制 
画面 。 在 这 个 例子 中 ， 始 终 会 引用 URL 与 history.state 来 绘制 页 面 内 容 ， 也 就 是 说 在 页 面 载 人 时 、 页 面 历 
史记 录 跳 转 时 、 内 容 更 新 时 等 所 有 的 页 面 跳 转 中 都 会 使 用 通用 的 内 容 绘制 处 理 方式 。 


| 代码 清单 14.8 ”详细 状态 的 恢复 
// 页 面 的 载 入 与 重 载 时 


window.onload = updateContent; 


















































































































































// 页 面 历史 记录 跳 转 时 


window.onpopstate = updateContent,; 


// 更 新 内 容 时 

function gotoContent (data, title, pathname) { 
// 添加 页 面 历史 记录 
history.pushState(data, title, pathname); 
updateContent () ; 











} 


// 引用 URL 及 history.state 并 更 新 内 容 

















中 而 在 Chrome19 以 及 更 新 的 版 本 中 也 对 此 提供 了 实现 译 者 注 
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function updateContent () { 
// 引用 URL 并 更 新 内 容 
/* 执行 一 些 操作 */ 


// 引用 history.state 并 更 新 内 容 

if (history.state && history.state.prev url) { 
// 如 果 含有 信息 ， 则 设 定 后 退 链 接 
backnirnk href nistorv otate rev ur 
backLink.textContent = history.state.prev title || 
backLlinkesty le repleay 0 

} else { 
// 如 果 不 含 信息 ， 则 隐藏 后 退 链 接 
backLink.style.display = 'none'; 





























lm 


山 





} 


国 页 面 历史 记录 的 替换 
应 该 在 页 面 状态 被 改写 时 相应 地 更 新 URL。 不 过 如 果 在 保存 页 面 历 史记 录 时 分 得 过 细 ， 则 需要 多 次 
点 击 后 退 键 才能 回 到 希望 人 ， 反 而 有 可 能 导致 可 用 性 下 降 。 
如 果 对 内 容 的 更 新 程度 没有 达到 需要 添加 新 的 页 面 历史 记录 ， 则 可 以 不 添加 历史 记录 而 直接 覆 写 正 
在 显示 的 历史 记录 信息 。 可 以 通过 replaceState 方法 来 覆盖 正在 显示 的 历史 记录 信息 。 该 方法 所 需 的 参数 
与 pushState 基本 相同 ， 只 是 replaceState 不 会 添加 新 的 历史 记录 而 会 覆盖 当前 的 历史 记录 信息 。 
代码 清单 14.9 将 在 切换 复 选 框 的 色 选 状态 时 将 这 一 色 选 状态 写 入 当前 的 历史 记录 信息 中 。 只 要 恰当 
地 更 新 历史 记录 信息 ， 就 能 够 在 遍 览 页 面 历史 记录 时 正确 地 恢复 复 选 框 的 状态 。 
有 代码 清单 14.9 页 面 历史 记录 的 蔡 换 
function toggleCheck (chkbox) { 
// 更 改 复 选 框 的 勾 选 状态 
chkbox.checked = !chkbox.checked; 


// 复制 当前 的 状态 对 象 
























































































































































VE 
or (va prop nistory seacenll 
datalpreopl = history tatelrronl 
/ 添加 勾 选 状态 


oo Chkbox = chkbox.checked; 


// 覆 写 历史 记录 信息 


history.replacestate(data, document.title); 





} 


根据 标准 ，history.state 是 read-only 的 ， 所 以 在 这 个 例子 中 ， 先 将 其 赋值 给 了 男 一 个 对 象 ， 之 后 再 添 
加 了 信息 并 传递 给 replaceState。 不 过 要 注意 的 是 ， 在 这 个 例子 中 3 EF 没有 考虑 状态 对 象 谨 套 的 情况 。 


图 history 对 象 的 属性 一 览 
表 14.1 总 结 了 history 对 象 的 
表 14.1 history 对象 的 属性 一 览 


























属性 。 不 过 还 请 大 家 务必 以 最 新 版 的 标准 为 准 。 








tt 
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属性 名 说 明 
length 历史 记录 的 总 数 ( 包括 正在 显示 的 页 面 ) 
state 表示 当前 状态 的 对 象 
以 delta 所 指定 的 步 数 在 历史 记录 中 跳 转 。go(-1) 等 同 于 back()，go(1) 等 同 于 
gol(delta) 
forward() 
back() 在 历史 记录 中 后 退 1 次 
forward() 在 历史 记录 中 前 进 1 次 
pushState(data, title, [, url]) 添加 历史 记录 信息 
replaceState(data, title, [, url]) 替换 当前 的 历史 记录 信息 
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| 14.2 ApplicationCache 





国 14.2.1 关于 缓存 管理 


| 

在 最 近 的 Web 应 用 程序 开发 中 ， 对 智能 手机 的 支持 已 经 是 一 个 无 法 回避 的 重要 事项 了 。 在 对 智能 手 
机 提供 支持 时 ， 应 当 考 虑 的 重要 的 一 点 是 通信 线路 的 不 稳定 性 。 移 动 设备 所 使 用 的 3G 线路 的 通信 速度 
较 慢 ， 而 且 还 可 能 多 次 发 生 信号 不 畅 的 情况 。 
通过 使 用 本 节 将 要 介绍 的 缓存 清单 文件 以 及 ApplicationCache API， 就 能 够 将 过 去 由 浏览 器 进行 管 
的 缓存 文件 改 由 应 用 程序 的 开发 者 来 控制 。 利 用 缓存 来 减少 不 必要 的 文件 下 载 后 就 能 够 改善 通信 速度 
慢 的 问题 ， 而 如 果 使 用 得 当 ， 甚 至 还 能 够 开发 出 可 以 离线 使 用 的 Web 应 用 程序 。 

表 14.2 列 出 了 一 些 支 持 ApplicationCache API 的 浏览 占 。IE9 没有 提供 对 该 API 的 支持 虽然 很 是 可 
惜 ， 但 对 于 受益 于 这 一 功能 的 智能 手机 来 说 ， 自 然 是 几乎 所 有 的 终端 都 能 支持 这 一 API。 
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表 14.2 ApplicationCache API 的 支持 情况 



































浏览 器 

Chrome 5.0 及 以 上 

Firefox 3.5 及 以 上 

Safari 4.0 及 以 上 

Opera 10.6 及 以 上 

iOS 2.1 及 以 上 

Android 2.0 及 以 上 
国 14.2.2 ”缓存 清单 文件 lL 
转 缓存 清单 文件 的 创建 

















通过 创建 被 称 为 缓存 清单 的 文件 ， 就 可 以 设 定 未 被 缓存 的 文件 。 缓 存 清 单 文件 实际 上 就 是 一 个 记录 
了 缓存 规则 的 简单 的 文本 文件 。 不 过 仅 通过 这 样 的 说 明 大 家 可 能 还 无 法 理解 这 一 概念 ， 本 节 之 后 将 通过 
简单 的 范例 依次 对 其 进行 说 明 。 

在 代码 清单 14.10 的 范例 中 ,缓存 了 HTML 所 引用 的 所 有 文件 ， 以 期 能 够 进行 离线 浏览 。 首 先 ， 在 
html 标签 的 manifest 属性 中 指定 了 缓存 清单 文件 的 路 径 。 虽 然 缓存 清单 文件 并 没有 规定 特定 的 扩展 名 ， 
不 过 推荐 使 用 .appcache。 

不 过 ， 必 须 通过 text/cache-manifest 这 一 MIME Tpye 来 发 布 缓存 清单 文件 。 如 果 正 在 使 用 Apache， 
则 将 在 缓存 清单 文件 所 在 的 同一 个 文件 夹 内 创建 一 个 名 为 .htaccess 的 文件 并 记录 AddType 目录 信息 ， 以 
设 定 支持 特定 扩展 名 的 MIME Type ( 代码 清单 14.11 )。 


| 代码 清单 14.10 ”cache.html 









































































































































<!DOCTYPE HIML> 
<html manifest="sample.appcache"> 
<head> 
<meta charset="UTF=8"> 
<seripe ere ooehes Ts /ne 
<link rel="stylesheet" href="cache.css"> 
</head> 
<body> 
<hi>Cache Sample</hlL> 
<img sme=Jtemls badge ngs 
</body> 
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</html> 


和 代码 清 单 14.11 htaccess 的 代码 示例 
AddType text/cache-manifest .appcache 


在 cache.html (代码 清单 14.10 ) 中 引用 了 cache.js 、cache.css 、html5-badge.png 这 三 个 文件 。 可 以 像 
代码 清单 14.12 这 样 在 缓存 清单 文件 中 列举 其 文件 路 径 ， 将 它们 设 定 为 缓存 对 象 。 而 指定 了 manifest 属 
性 的 文件 将 会 被 自动 缓存 ， 所 以 不 需要 列 出 cache.html。 


| 代码 清单 14.12 sample.appcache 














CACHE MANIFEST 
Henlsone 


CACHE : 

./cache .js 
./cache .css 
./html5-badge.png 


必须 在 缓存 清单 文件 的 第 一 行 写 上 CACHE MENIFEST。 而 以 # 开 始 的 行将 被 识别 为 注释 。 写 有 
CACHE: 的 行 及 其 之 后 的 内 容 是 CACHE 区 段 ， 在 CACHE 区 段 中 列举 的 文件 都 将 被 自动 缓存 。 

在 准备 好 了 缓存 清单 文件 后 就 可 以 试 着 打开 cache.html 了 。 在 第 一 次 访问 时 就 会 将 所 有 列 在 缓存 
清单 文件 中 的 文件 全 都 缓存 至 本 地 。 如 果 是 用 Chrome 打开 的 ， 就 能 将 其 输出 至 控制 台 ， 十 分 易于 理解 
(图 14.1 )。 

如 果 缓 存 成 功 ， 在 缓存 清单 文件 中 列 出 这 些 的 文件 就 能 通过 保存 于 本 地 的 应 用 程序 缓存 来 读 取 。 因 
此 ， 即 使 第 二 次 访问 时 处 于 离线 状态 ， 可 能 够 显示 页 面 内 容 (图 14.2 )。 


上 图 14.1 应 用 程序 缓存 的 创建 ‖ 图 14.2 读 取 应 用 程序 缓存 
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图 缓存 的 更 新 
在 打开 注册 于 应 用 程序 缓存 中 的 页 面 时 ， 浏 览 器 将 首先 引用 被 缓存 的 文件 并 显示 。 之 后 将 在 后 台 自 
动 确 认 缓存 清单 文件 是 否 需要 更 新 ， 在 更 新 之 后 将 会 自动 重新 缓存 所 有 的 文件 。 
也 就 是 说 ， 即 使 在 服务 器 端 更 新 了 文件 ， 在 更 新 后 首次 访问 时 浏览 器 还 是 会 显示 旧版 本 的 缓存 ， 
对 此 请 加 以 注意 。 如 果 缓 存 的 确认 与 更 新 顺利 完成 ， 则 将 从 下 次 访问 起 引用 已 更 新 的 新 版 缓存 。 
此 外 ,在 客户 端 将 会 根据 缓存 清单 文件 是 否 被 更 新 来 判断 是 否 有 必要 更 新 缓存 。 即 如 果 仅 仅 是 改写 
了 所 缓存 的 文件 ， 已 经 完成 了 缓存 工作 的 客户 端 不 会 更 新 缓存 。 为 了 更 新 缓存 ， 必 须 更 新 缓存 清单 文件 。 
即使 缓存 规则 没有 发 生 更 改 ， 也 必须 对 缓存 清单 文件 进行 更 新 以 更 新 缓 在。 只 要 通过 注释 插 和 人 版 本 
号 或 是 更 新 日 期 ， 就 能 够 在 各 种 情况 下 实现 对 缓存 清单 文件 的 更 新 了 (代码 清单 14.13 )。 
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| 代码 清单 14.13 sample.appcache 


CACHE MANIFEST 
# revision 2 


CRACHE : 

./cache .js 
./cache .css 
./html5-badge.png 


在 这 种 情况 下 让 浏览 器 重 载 的 话 ， 就 能 自动 地 刷新 所 有 的 缓存 文件 。 不 过 这 是 所 显示 的 页 面 引 用 的 
仍 是 旧版 本 的 缓存 ， 对 此 请 加 以 注意 ( 图 14.3 )。 需 要 在 下 一 次 重 载 之 后 才能 引用 最 新 的 文件 。 如 果 和 希望 
精确 地 控制 缓存 更 新 的 时 机 ， 则 必须 使 用 之 后 将 要 说 明 的 Application API。 


‖ 图 14.3 应 用 程序 缓存 的 更 新 









































= 7 a 
[x Sal Elements 十 Resources I© Network | Scripts PY Timeiine CO Profiles 
Name Status ize Time 
Path __ ; i hod _| Text | Type |Content |Latency | 
所 | cache.html 3ms 
<> GET (from cache) text/html (from cache) 

SS /~shamabe 3ms 
~ GET (f he) application/javascript (f vel 
J 有 
i /hamabe rom cache) application/javascrip om cache sms 

=| cache.css Sms 
css GET (from cache) text/css (from cache) 

= /~shamabe 5ms 

html5-badge.png 69ms 

目 

7 GET (from cache) image/png (from cache) ee 











团 NETWORK 区 段 
如 果 在 缓存 清单 文件 中 写 下 NETWORK:， 则 从 该 行 起 及 之 后 的 部 分 都 将 被 作为 NETWORK 区 段 。 
在 NETWORK 区 段 写 出 的 资源 将 不 会 被 缓存 ， 而 始终 通过 网 络 访问 。 而 且 写 于 NETWORK 区 段 的 URL 
将 会 进行 向 前 一 致 性 比较 ， 于 是 可 以 像 下 面 这 样 仅 通过 一 行 来 实现 多 个 资源 的 指定 。 
NETWORK: 
/api/ 
NETWORK 区 段 还 有 一 个 重要 的 作用 。 对 于 使 用 了 缓存 清单 文件 的 应 用 程序 来 说 ， 仅 能 访问 写 在 
NETWORK 区 段 中 的 外 部 域内 的 资源 。 例 如 在 使 用 Yahoo!JAPAN 的 搜索 API 时 ， 必 须 像 下 面 这 样 在 
NETWORK 区 段 中 显 式 地 指定 白 名 单 。 


NETWNWORK : 
http://search.yahooapis.jp/ 


由 于 可 以 通过 域 执行 访问 控制 所 以 通信 是 很 安全 的 ， 不 过 对 于 一 些 应 用 程序 来 说 ， 可 能 难以 事先 指 
定 所 有 的 外 部 资源 。 这 时 可 以 在 NETWORK 区 段 使 用 通配符 ， 以 允许 所 有 对 外 部 资源 的 访问 。 


NETWORK: 


* 
























































































































































国 FALLBACK 区 段 

如 果 在 缓存 清单 文件 中 写 下 FALLBACK:， 则 从 该 行 起 及 之 后 的 部 分 都 将 被 作为 FALLBACK 区 段 。 
在 FALLBACK 区 段 中 ， 我们 可 以 指定 某 一 资源 无 法 被 访问 时 的 替代 资源 。 与 NETWORK 区 段 相 同 ， 这 
时 也 会 对 URL 进行 向 前 一 致 性 比较 。 

像 下 面 这 样 进行 指定 之 后 ，notfound.html 就 将 被 保存 在 应 用 程序 缓存 中 。 在 无 法 找到 资源 ， 或 是 
由 于 离线 而 无 法 连接 时 ， 如 果 该 资源 在 缓存 清单 文件 中 的 相对 路 径 是 以 contents/ 开始 的 话 ， 就 会 将 
notfound.html 作为 替代 资源 显示 。 























图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 


@ 258 一 一 一 第 4 部 分 HTML5 


FALLBACK: 
contents/ notfound.html 
[| 14.2.3 ApplicationCache API | 








通过 ApplicationCache API 能 够 实现 对 缓存 更 新 时 机 更 为 精确 的 控制 。 

在 通常 情况 下 ， 将 在 开启 页 面 时 执行 缓存 的 更 新 确认 与 缓存 更 新 ， 并 在 下 次 开启 页 面 时 才 会 反映 最 
新 的 缓存 。 因 此 ， 必 须 进行 两 次 重 载 ， 最 新 的 缓存 才能 得 以 反映 。 而 通过 ApplicationCache API 在 合适 的 
时 机 检查 更 新 的 话 ， 就 能 够 将 这 一 问题 控制 在 最 小 范围 内 。 

可 以 通过 在 window 对 象 中 定义 的 applicationCache 对 象 来 使 用 ApplicationCache API 的 各 种 功能 。 接 
下 来 ， 本 节 将 说 明 使 用 applicationCache 来 确认 缓存 更 新 及 反映 更 新 的 方法 。 
图 对 缓存 更 新 的 确认 

我 们 可 以 通过 applicationCache.update 方法 在 启动 页 面 以 外 的 任意 时 刻 执行 对 缓存 更 新 的 确认 。 在 
执行 了 update 之 后 将 会 确认 缓存 清单 文件 的 更 新 ， 如 果 文 件 被 更 新 ， 则 会 自动 重新 缓存 所 有 的 文件 。 

我 们 可 以 在 用 户 按 下 了 更 新 键 、 从 服务 器 收 到 了 推送 通知 ， 或 计时 器 经 过 了 一 定 的 时 间 间 隔 等 情况 
之 后 执行 update。 代 码 清单 14.14 使 用 了 计时 器 以 在 每 经 过 一 段 时 间 后 确认 更 新 。 


| 代码 清单 14.14 ”对 缓存 更 新 的 确认 








































































































window.onload = function() { 
// 每 小 时 对 更 新 进行 确认 
setIinterval (function() { 





applicationCache.update(); 
le O00 ee SO ES 
bs 
我 们 可 以 通过 引用 applicationCache.status 或 实现 相应 的 事件 处 理 程序 ， 来 获知 是 否 进行 了 更 新 或 缓 
存 的 下 载 状况 。HTMLS5 相关 的 异步 API 大 都 像 这 样 定 义 了 用 于 状态 确认 的 属性 以 及 事件 处 理 程 序 ， 不 过 
在 大 部 分 情况 下 ， 都 只 需要 对 事件 处 理 程序 进行 实现 就 可 以 了 。 表 14.3 总 结 了 可 以 通过 applicationCache. 










































































| 由 











status 获取 的 值 ， 表 14.4 总 结 了 applicationCache 所 能 使 用 的 事件 处 理 程序 。 




























































































14.3 ee 的 常 性 一 览 
IE 0 没有 应 用 程序 缓存 
IDLE 1 正在 使 用 直至 上 次 确认 时 最 新 的 缓存 文件 
CHECKING 正在 确认 缓存 清单 文件 的 更 新 
DOWNLOADING 3 正在 下 载 最 新 的 缓存 文件 
UPDATEREADY 4 已 经 完成 了 最 新 的 缓存 文件 的 使 用 准备 
OBSOLETE 5 缓存 清单 文件 已 被 删除 























表 14.4 applicationCache 所 能 使 用 的 事件 处 理 程序 


























事件 处 理 程 序 说 明 

onchecking 在 开始 确认 缓存 清单 文件 时 被 执行 

onnoupdate 在 确认 缓存 清单 文件 后 没有 更 新 的 情况 下 被 执行 
ondownloading 在 开始 下 载 缓存 时 被 执行 





在 缓存 的 下 载 过 程 中 定期 被 执行 。 可 以 通过 event.total 获取 所 下 载 文件 的 总 数 ， 而 通过 event.loaded 则 
可 以 获取 已 下 载 的 文件 数量 
oncached 在 所 有 缓存 的 下 载 完成 时 被 执行 

在 下 载 完成 后 能 够 再 次 调用 update 时 被 执行 。 


onprogress 






















































































onupaatoroady 而 且 可 以 通过 在 此 之 后 调用 swapCache 来 反映 最 新 的 缓存 
onobsolete 在 缓存 清单 文件 被 删除 时 执行 
onerror 在 发 生 了 某 种 错误 时 被 执行 
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图 对 缓存 更 新 的 反映 

如 果 在 updateready 事件 发 生 后 执行 applicationCache.swapCache 方法 ， 则 可 以 在 后 台 将 缓存 替换 为 最 
新 版 。 不 过 ， 当 前 显示 的 页 面 已 经 引用 了 的 资源 则 将 继续 使 用 之 前 的 版 本 。 

对 于 基于 网 页 且 缓 存 了 大 量 静 态 HTML 的 应 用 程序 来 说 ，swapCache 或 许 是 个 不 错 的 方法 ， 但 如 果 
包含 了 JavaScript 逻辑 等 内 容 的 更 新 ， 则 只 有 重 载 正 在 显示 的 页 面 才 有 意义 。 不 过 ,在 用 户 进 行 操作 时 突 
然 重 载 页 面 并 不 合适 。 通 知 用 户 现在 有 了 可 用 的 新 版 本 或 许 是 一 种 稳妥 的 解决 方式 。 

可 以 像 代 码 清 单 14.15 这 样 对 此 进行 简单 的 实现 。 


| 代码 清单 14.15 ”通知 有 新 的 可 用 版 本 





































































































applicationCache.onupdateready = function() { 
Wer or eomemml 最 新 版 本 已 经 可 用 。 Wa 
' 要 重 载 页 面 吗 ? ') ; 
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国 14.2.4 在 线 与 离线 | 


背 助 应 用 程序 缓存 ， 程 序 可 以 在 离线 时 也 能 浏览 所 缓存 的 信息 。 然 而 ， 对 于 诸如 文档 编辑 或 邮件 发 
送 等 数据 更 新 类 的 功能 ， 仅 人 靠 这 种 方式 还 无 法 实现 离线 使 用 。 

而 如 果 将 离线 时 进行 的 数据 更 新 类 操作 保存 至 浏览 器 所 能 用 的 数据 库 (第 16 章 )， 并 在 转 为 在 线 状 
态 时 与 服务 器 进行 同步 的 话 ， 就 能 够 实现 离线 状态 下 的 数据 更 新 类 功能 。 

在 实际 实现 过 程 中 ,需要 考虑 同步 顺序 及 重 试 处 理 等 很 多 问题 ， 不 过 ， 比 起 所 付出 的 这 些 成 本 ,能 
够 离线 使 用 这 些 功 能 魅力 更 大 。 有 自信 处 理 好 这 些 问题 的 读者 请 务必 挑战 一 下 。 

本 节 之 后 将 介绍 通过 程序 对 网 络 连接 状态 进行 确认 的 方法 。 这 在 实现 离线 支持 的 过 程 中 是 不 可 缺少 的 。 

可 以 通过 引用 navigatoronLine 来 获知 网 络 连接 状态 。 还 可 以 通过 online/offline 事件 来 侦 听 连接 状态 
的 切换 时 机 。online/offline 事件 是 由 document.body 触发 的 ， 并 将 传递 给 document 对 象 与 window 对 象 。 不 过 
在 有 些 浏览 器 中 ，window 对 象 由 于 事件 处 理 程序 的 兼容 性 问题 等 而 无 法 正常 执行 功能 ， 请 对 此 加 以 注意 。 

代码 清单 14.16 介绍 的 是 一 个 能 够 对 网 络 连接 状态 进行 通知 的 范例 。 


| 代码 清单 14.16 ”网 络 连接 状态 的 通知 


<p>The network is: <span id="indicator'">(state unknown)</span></p> 
= Slee 













































































































































































// 网 络 连接 状态 的 更 新 
function updateIndicator() { 
Var indicator = document .getElementById('indicator'); 
nglieaeor eeeoneexc moavicgaCor onnine Vonlme one 


} 
// 设 定 body 的 各 个 事件 处 理 程序 


document .body.onload = updateIndicator; 
document .body.ononline = updateIndicator; 
document .body .onoffline = updateIndicator; 
Se 
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与 桌面 应 用 的 协作 







本 章 介绍 Drag Drop API 与 File API。 这 两 个 API 都 有 着 独 具 魅 力 的 功能 ， 如 果 两 者 结合 使 用 ， 
就 能 够 实现 非常 强大 的 与 桌面 应 用 程序 的 协作 功能 。 


15.1 | Drag Drop API 


国 15.1.1 Drag Drop API 的 定义 


Drag Drop AP 是 一 种 能 够 在 浏览 器 中 实现 DOM 元 素 的 拖 动 与 释放 操作 的 API。 拖 动 与 释放 功能 非 
常 重要 ， 它 可 以 使 Web 应 用 程序 具有 接近 原生 桌面 程序 的 易 用 性 。 众 所 周知 ， 拖 动 与 释放 这 一 功能 ， 其 
实在 很 久 以 前 就 已 经 在 浏览 器 中 得 以 实现 。 

那么 ， 和 过 去 的 拖 动 操作 相 比 ， 这 一 API 究 竞 有 哪些 不 同 之 处 呢 ? 
国 实现 方式 上 的 区 别 

过 去 实现 拖 动 与 释放 操作 的 基本 方式 基于 下 面 的 三 个 流程 。 其 想法 本 身 非常 简单 ， 不 过 ， 由 于 从 鼠标 
移动 开始 ， 一 直到 更 新 DOM 元 素 的 显示 为 止 ， 都 需要 自己 管理 ， 因 此 在 实际 使 用 时 非常 麻烦 。 

@ 通过 mousedown 事件 来 捕捉 DOM 元 素 

@ 通过 mousemove 事件 来 移动 DOM 元 素 

@ 通过 mouseup 事件 来 释放 DOM 元 素 


而 借助 于 Drag Drop API， 通 过 dragstart 及 drop 等 新 添加 的 高 度 抽象 的 事件 ， 就 能 够 实现 更 为 直观 
的 拖 动 与 释放 操作 。 同 时 ， 由 于 拖 动 过 程 中 基本 的 显示 更 新 处 理 也 都 交 由 浏览 器 来 进行 ， 从 而 使 开发 者 
能 够 将 精力 集中 于 程序 的 开发 ， 以 实现 运用 了 这 一 拖 动 操作 的 应 用 程序 。 
园 功能 上 的 区 别 

当前 ， 人 们 已 经 开发 了 大 量 支 持 拖 动 与 释放 操作 的 库 。 只 要 利用 这 些 库 ， 就 能 够 很 轻松 地 将 跨 浏览 
支持 的 拖 动 与 释放 功能 嵌入 应 用 程序 之 内 。 在 这 种 情况 下 ， 仍 要 坚持 使 用 Drag Drop API 的 意义 是 什么 呢 ? 

答案 就 在 DataTransfer 中 。DataTransfer 是 对 拖 动 操作 中 数据 的 接受 与 传递 提供 支持 的 API。 值 得 一 
提 的 是 ， 通 过 DataTransfer 传送 数据 有 一 些 重要 的 优点 。 例 如 ， 数 据 的 发 送 方 ( 拖 动 起 始 处 ) 与 数据 的 
接收 方 ( 释放 处 ) 并 未 限定 于 同一 窗口 内 。 
举例 来 说 ， 可 以 由 此 实现 将 浏览 器 中 的 DOM 元 素 拖 向 文本 编辑 器 ， 或 者 将 桌面 上 的 文件 拖 向 浏览 
器 等 操作 。Drag Drop API 消除 了 Web 应 用 程序 与 原生 应 用 程序 之 间 的 界限 ， 是 一 种 非常 重要 而 充满 魅力 
的 功能 。 





























































































































































































































D http://dev.w3.org/html5/spec/dnd.html 
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围 15.1.2 接口 


国 拖 动 事件 












































的 协作 
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由 Drag Drop API 进行 拖 动 与 释放 时 ， 数 据 的 发 送 方 ( 拖 动 的 元 素 ) 与 接收 方 ( 释放 的 区 域 ) 这 两 者 
之 间 是 一 种 松 厢 合 的 实现 方式 。 通 过 对 拖 动 的 元 素 与 释放 的 区 域 























分 别 实现 必要 的 事件 处 理 程序 ， 就 能 够 




























































































完成 拖 动 操 作 。 
表 15.1 列 出 了 能 够 设 定 拖 动 元 素 的 事件 处 理 程序 ， 表 15.2 列 出 了 能 够 设 定 释放 区 域 的 事件 处 理 
程序 oo 
表 15.1 能 够 设 定 拖 动 元 素 的 事件 处 理 程序 
事件 名 说 明 
dragstart 在 拖 动 操作 开始 时 被 触发 
drag 在 拖 动 操 作 过 程 中 被 定期 触发 
dragend 在 拖 动 操作 结束 时 被 触发 
表 15.2 能 够 设 定 释放 区 域 的 事件 处 理 程序 
事件 名 说 明 
dragenter 在 拖 动 操作 过 程 中 ， 进 入 DOM 元 素 的 领域 内 时 被 触发 
dragover 在 拖 动 操作 过 程 中 ， 处 于 DOM 元 素 的 领域 内 时 被 定期 触发 
dragleave 在 拖 动 操作 过 程 中 ， 离 开 DOM 元 素 的 领域 时 被 触发 
drop 在 DOM 元素 上 释放 数据 时 被 触发 
这 些 拖 动 事件 继承 了 鼠标 事件 的 接口 ， 因 此 也 可 以 通过 screenX 及 clientX 等 鼠标 事件 的 属性 来 确认 





























拖 动 过 程 中 的 位 置 。 曾 经 使 ) 
一 个 大 概 的 理解 了 吧 。 






































| 鼠标 事件 来 实现 拖 动 与 释放 功能 的 人 ， 应 该 已 经 对 相应 事件 的 使 用 方法 有 














由 于 拖 动 事件 将 会 根据 拖 动 操作 的 状态 和 合适 的 时 机 被 触发 ， 因 此 不 必 由 自 己 来 管理 与 拖 动 释 放 相 
关 的 复杂 的 旗 标 。 例 如 ，drag 事件 及 dragover 事件 被 限定 于 仅 会 在 拖 动 操作 中 被 触发 。 它 们 与 mouseover 





事件 不 同 ， 即 使 鼠标 没有 处 于 移动 状态 ， 也 会 被 定期 触发 。 














各 个 事件 处 理 程序 将 会 接收 以 DataTransfer 形式 保存 的 数据 ， 并 对 UI 显示 的 更 新 功能 进行 实现 。 在 
使 用 Drag Drop API 进行 拖 动 操作 时 ， 被 拖 动 元 素 的 捉 取 图 像 默认 将 会 随 着 鼠标 的 移动 而 显示 相应 的 内 
容 ， 而 拖 动 过 程 中 的 页 面 滚动 等 处 理 也 都 将 由 浏览 器 来 解决 。 因 此 ， 如 果 没 有 特别 的 需求 ， 在 最 初 不 考 





























虑 拖 动 中 的 UI 显示 处 理 也 不 会 有 什么 问题 。 
转 DataTransfer 














DataTransfer 是 Drag Drop API 中 的 核心 部 分 。 在 所 有 的 拖 动 事件 的 事件 对 象 中 ， 都 含有 dataTransfer 








@ 数据 的 接收 
@ 数据 处 理 方式 的 指定 
@ 拖 动 图 像 的 设 定 





属性 。DataTransfer 最 为 重要 的 功能 是 接收 数据 ， 但 同时 也 














具有 一 些 其 他 功能 。 











表 153 总 结 了 DataTransfer 的 接口 。 有 很 多 属性 只 能 在 特定 的 拖 动 事件 内 被 调用 或 修改 ， 对 此 请 加 


以 注意 。 本 节 之 后 将 说 明 各 个 属性 的 详细 信息 。 


表 15.3 DataTransfer 的 接口 一 览 
属性 名 说 明 


SetDatal(format, data) 


以 format 所 指定 的 格式 添加 数据 ( 在 dragstart 事件 中 有 效 ) 














getData(format) 


以 format 所 指定 的 格式 获取 数据 ( 在 drop 事件 中 有 效 ) 
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( 续 ) 
属性 名 说 明 
clearDatal[format) 以 format 所 指定 的 格式 清除 数据 。 如 果 没 有 指定 format， 则 清除 所 有 的 数据 
types 包含 正在 拖 动 的 数据 的 ffomat 的 数组 
files 包含 正在 拖 动 的 文件 的 File 对 象 的 数组 
setDraglmage(lelement, x, y) 设 定 拖 动 图 像 ( 在 dragstart 事件 中 有 效 ) 
addElement(element) 设 定 拖 动 图 像 ( 在 dragstart 事件 中 有 效 ) 
effectAllowed 设 定 允 许 用 于 拖 动 操作 的 目标 的 效果 。 通 常会 在 dragstart 事件 中 设 定 
释放 操作 的 目标 的 效果 ,或 由 用 户 选 择 的 效果 。 可 以 在 最 新 的 dragover 或 dragenter 事件 中 设 
dropEffect 定 。 如 果 没 有 设 定 为 特定 的 值 ， 则 会 使 用 标准 的 操作 系统 修饰 键 ， 在 可 供 选 择 的 效果 中 进行 选 
择 。 系 统 将 会 在 copy、move、link 与 none 之 中 选择 , 并 根据 选中 的 效果 显示 相应 的 拖 动 图 像 



































故 15.1.3 基本 的 拖 动 与 释放 | 


只 要 使 用 dataTransfer 与 最 低 限 度 所 必需 的 事件 处 理 程序 ， 就 能 够 实现 简单 的 能 够 接收 数据 的 范例 程 
序 。 请 通过 这 一 范例 来 掌握 基本 的 处 理 流程 。 
国 拖 动 元 素 的 设 定 

为 了 使 元 素 能 够 被 拖 动 ， 首 先 要 做 一 些 事 前 的 准备 处 理 。 要 让 特定 的 元 素 支 持 被 拖 动 ， 需 要 将 元 素 
的 draggable 属性 设置 为 true。 


ET 
<11 draggable="true">Seiichiro INOUE</1i> 
<li draggable="true">Shota HAMABE</1i> 
=araggable Verve nao noven Yl 
le 


draggable 属性 的 值 可 以 被 指定 为 ttue、false 与 auto 中 的 任意 一 种 。 如 果 指 定 为 auto， 则 该 元 素 将 会 
使 用 默认 值 。 例 如 ，img 元 素 与 a 元 素 是 默认 能 够 拖 动 的 元 素 。 而 元 素 是 默认 无 法 被 拖 动 的 ， 因 此 在 
这 里 显 式 地 将 draggable 的 属性 设 定 为 true。 
图 拖 动 方 的 设 定 

拖 动 方 〈 数 据 的 发 送 方 ) 需要 在 开始 拖 动 时 将 数据 设置 于 dataTransfer 中 。 可 以 调用 setData 方法 来 
将 所 拖 动 的 数据 设置 给 dataTransfer。setData 是 一 种 只 能 够 在 dragstart 事件 处 理 程序 中 执行 的 方法 。 代 码 
清单 15.1 是 一 个 例子 。 

setData 的 第 1 个 参数 用 于 指定 数据 的 格式 ( MIME Type )。 我 们 可 以 对 1 次 拖 动 操 作 指 定 多 个 格式 的 
数据 。 虽 然 从 标准 上 来 说 任何 格式 都 是 能 够 被 指定 的 ,但 实际 的 实现 情况 会 根据 浏览 器 的 不 同 而 有 所 不 
同 。 在 代码 清单 15.1 的 例子 中 所 指定 的 MIME Type， 至 少 在 最 新 版 的 主流 浏览 器 中 都 是 被 支持 的 。 
‖ 代码 清单 15.1 对 所 拖 动 数据 的 设置 


Var element = document .getElementsByTagName ('1i'); 































































































for (var i = 0; i < elements.length; i++) { 

// 在 开始 拖 动 时 将 数据 设置 于 dataTransfer 中 

elements[i] .ondragstart = function(e) { 
// 设置 文本 数据 
e.dataTransfer.setData('text/plain', e.target.textContent); 
// 设置 HTML 数据 
e.dataTransfer.setData('text/plain', e.target.outerHTML); 
// 设置 URL 数据 


e.dataTransfer.setData('text/uri-list', document.location.href); 
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国 释放 方 的 设 定 

接 下 来 ， 我 们 来 对 释放 方 〈 数 据 的 接收 方 ) 进行 实现 。 可 以 调用 getData 方法 来 从 dataTransfer 中 获 
取 被 拖 动 的 数据 。getData 是 一 种 只 能 够 在 drop 事件 处 理 程序 中 执行 的 方法 。 

在 代码 清单 15.2 的 范例 中 ， 释 放 区 域 仅 会 在 被 拖 动 的 dataTransfer 所 包含 的 是 文本 数据 的 情况 下 才 
人 允许 释放 操作 ， 并 将 通过 alert 语句 显示 被 拖 动 的 文本 数据 。 
有 代码 清单 15.2 获取 被 拖 动 的 数据 


<div id="drophere'">Drop Here</div> 





























<script> 
// 释放 区 域 


var drophere = document .getElementById!('drophere'); 











// 当 拖 动 元 素 在 释放 区 域 之 上 时 
drophere.ondragover = function(event) { 
for (var i = 0; i < event.dataTransfer.types.length; i++) { 
if (event.dataTransfer.types[i] === 'text/plain') { 
// 取消 浏览 器 的 默认 操作 
event .preventDefault (); 
break; 


} 
a 


// 当 拖 动 元 素 被 释放 于 释放 区 域 中 时 
drophere.ondrop = function(event) { 
// 取消 浏览 器 的 默认 操作 


event .preventDefault () ; 


// 获取 所 拖 动 的 数据 
var yourName = event .dataTransfer.getDatal('text/plain'); 
alert('Hello, ' + yourName + '!'); 








a 

preventDefault 是 一 个 用 于 取消 浏览 器 的 默认 操作 的 方法 。 在 代码 清单 15.2 的 例子 中 ， 有 两 处 调用 了 
preventDefault 方法 。 

在 dragover 事件 中 ,浏览 器 的 默认 操作 是 将 drop 事件 取消 。 因 此 ， 如 果 要 使 drop 事件 生效 ， 则 必 
须 在 dragover 事件 中 调用 preventDefault 以 取消 默认 操作 。 在 这 一 范例 中 ， 只 有 在 dataTransfer 含有 的 是 
text/plain 格式 的 数据 时 ， 才 会 执行 preventDefault 而 使 drop 事件 能 够 发 挥 效果 。 

此 外 , 在 drop 事件 内 也 调用 了 preventDefault。 如 果 将 链接 或 文件 拖 入 浏览 器 ， 浏 览 器 就 将 会 自动 尝 
试 打开 它们 。 这 个 功能 虽然 方便 ,但 如 果 要 对 所 拖 入 的 数据 进行 自 定义 处 理 ， 浏 览 器 反而 是 做 了 多 余 的 
操作 。 为 了 避免 这 个 问题 要 使 用 preventDefault 来 取消 这 些 操 作 。 


国 15.1.4 自 定 义 显示 | 


如 果 使 用 Drag Drop API， 则 可 以 在 实现 拖 动 与 释放 操作 时 完全 不 考虑 拖 动 中 的 UI 显示 问题 。 不 过 
话 虽 如 此 ， 在 拖 动 与 释放 操作 中 ，UI 的 显示 也 是 很 重要 的 部 分 。 本 节 接 下 来 将 介绍 根据 需要 来 显示 自 定 
义 内 容 的 方法 。 
图 拖 动 图 像 的 更 改 

在 拖 动 过 程 中 显示 的 图 像 ( 拖 动 图像 ) 默认 将 使 用 拖 动 元 素 的 提取 图 像 。 可 以 通过 setDragImage 或 
addelement 来 更 改 拖 动 图 像 。 

setDragImage 与 addElement 是 仅 能 在 dragstart 事件 中 调用 的 方法 。 这 两 个 方法 都 可 以 以 任意 DOM 
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元 素 为 参数 ， 将 所 指定 的 DOM 元素 的 提取 图 像 作为 拖 动 图 像 来 使 用 。 不 过 ， 如 果 指 定 的 DOM 元 素 是 


img 元 素 ， 则 不 会 使 用 其 提取 图 像 ， 而 会 使 用 img 元 素 的 src 属性 所 指定 的 图 像 。 






































setDragImage 与 addElement 的 区 别 在 于 拖 动 图 像 的 显示 位 置 不 同 。setDragImage 以 拖 动 图 像 的 左 








上 角 为 拖 动 位 置 来 显示 该 图 像 并且 可 以 通过 第 2 及 第 3 个 参数 来 指定 xy 坐标 ， 以 调整 显示 位 置 。 而 
addElement 则 将 参数 所 指定 的 DOM 元 素 的 当前 位 置 直接 作为 拖 动 图 像 的 初始 显示 位 置 。 


使 























对 于 诸如 日 历 那 样 的 弹 窗 式 小 工具 ， 可 以 通过 addElement 来 移动 其 显示 位 置 。 代 码 清单 15.3 是 一 个 
































] 了 addElement 的 例子 。 对 于 该 例 这 样 的 情况 ， 如 果 不 通过 addElement 将 整个 容器 指定 为 拖 动 图 像 ， 











则 会 默认 以 handler 作为 拖 动 图 像 ， 从 而 导致 显示 错乱 。 
| 代码 清单 15.3 dataTransfer.addElement 的 使 用 示例 











= ld eontealnery 
<div id="handler">handler</div> 


/cl 


uteleS 
Var container = document .getElementById('container'), 
handler = document .getElementById('handler'); 


// handler 的 拖 动 开始 
handler.ondragstart = function(event) { 
// 将 container 的 捉 取 图 像 指 定 为 拖 动 图 像 


event .dataTransfer.addElement (container); 




















NS 


和 addElement 相 比 ，setDragImage 的 使 用 频率 可 能 会 比较 低 ， 不 过 通过 setDragImage 方法 ， 同 样 能 

















够 将 自己 准备 的 图 像 设 定 为 拖 动 图 像 。 但 大 希 望 能 将 任意 图 像 指 定 为 拖 动 图 像 ， 则 还 需要 进行 一 些 处 理 。 


为 此 ， 需 要 使 用 的 是 img 元 素 。 





























如 果 参 数 被 指定 为 了 img 元 素 ， 将 不 会 使 用 其 捉 取 图 像 来 作为 拖 动 图 像 ， 而 会 使 用 其 src 属性 所 指 


























定 的 图 像 。 因 此 ， 可 以 将 img 元 素 的 src 属性 指定 为 任意 图 像 之 后 ， 再 将 该 元 素 设 定 为 setDragImage 的 
参数 ， 以 实现 将 任意 的 图 像 设 为 拖 动 图 像 。 








代码 清单 15.4 是 一 个 将 任意 图 像 设 定 为 拖 动 图 像 的 示例 。 在 这 个 例子 中 ， 我 们 对 拖 动 图 像 的 显示 位 














置 进行 了 调整 ， 拖 动 位 置 即 为 拖 动 图 像 的 中 心 。 
| 代码 清单 15.4 ”dataTransfer.setDraglmage 的 使 用 示例 


EmodEiasnaoraoanmajsu seaoraoome ty le vi Ey dn osnon a onte 
<div id="dragme">Drag Me</div> 


Se 
document .getElementById('dragme') .ondragstart = function(event) { 
Var dragimage = document .getElementById('dragimage'), 
offsetX = dragimage.offsetWwidth / 2, 
offsetY = dragimage.offsetHeight / 2; 


// 指定 拖 动 图 像 


event .dataTransfer.setDragImage (dragimage, offsetXx, offsetY); 








} E 


7 
Esc 


图 使 用 CSS 对 拖 动 图 像 进行 自 定义 

















如 果 能 够 通过 CSS 来 微调 拖 动 图 像 所 指定 的 DOM 元 素 的 颜色 及 透明 度 等 属性 ， 将 是 一 件 非常 方便 














的 事 。 然 而 可 惜 的 是 ， 目 前 各 个 浏览 器 中 与 拖 动 相关 的 CSS 功能 的 统一 尚 无 进展 。 








在 WebKit 类 型 的 浏览 器 中 ， 可 以 通过 -webkit-drag 这 一 伪 类 来 实现 基于 CSS 的 拖 动 图 像 自 定义 。 下 
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面 是 一 个 例子 。 
/* 设 定 拖 动 图 像 的 样式 */ 
#dragme:-webkit-drag { 
GPacney 00 
} -webkit-transform: scale(0.8); 
图 释放 区 域 的 强调 显示 
通过 向 用 户 强调 显示 应 该 在 何 处 释放 元 素 ， 就 能 够 大 幅 提 高 拖 动 操作 的 易 用 性 。 诸 如 将 dragover 中 
的 元 素 的 背景 色 改 得 显眼 一 些 ， 或 者 进行 元 素 替 换 时 在 插入 位 置 加 上 辅助 线 等 ， 都 是 一 些 常 见 的 例子 。 
以 下 是 在 实现 这 些 效果 时 的 要 点 。 
@ 在 dragover 事件 中 添加 效果 。 
@ 不 过 如 果 需 要 根据 释放 的 位 置 及 时 机 来 改变 动作 , 则 需要 在 dragover 事件 中 添加 能 够 对 动作 进行 说 明 的 
效果 。 
@ 在 dragleave 事件 以 及 drop 事件 中 删除 效果 。 
由 于 在 执行 释放 操作 时 不 会 发 生 dragleave 事件 ， 因 此 必须 同时 在 dragleave 事件 和 drop 事件 中 进 
行 效果 的 删除 处 理 。 由 此 可 以 写 出 代码 清单 15.5 中 的 范例 ， 在 这 个 范例 中 ，dragover 中 的 元 素 被 赋予 了 
dragover 这 一 类 名 。 由 于 有 了 代码 清单 15.5 中 实现 的 功能 ， 之 后 可 以 使 用 CSS 来 对 释放 区 域 进 行 高 度 的 
自 定义 处 理 。 
| 代码 清单 15.5 ”在 dragover 的 元 素 中 添加 类 


element .ondragenter = function(event) { 
// 效果 的 添加 


element .classList.add('dragover'); 






















































































D8 

element .ondragleave = function(event) { 
// 效果 的 删除 
element .classList.remove('dragover'); 





bE 
element .ondrop = function(event) { 
// 效果 的 删除 


element .classList.remove('dragover'); 














py 


加 15.1.5 文件 的 Drag-In/ Drag-Out | 


转 获取 桌面 程序 中 的 文件 

可 以 借助 dataTransfer 的 files 属性 以 通过 拖 动 操作 来 获取 桌面 程序 中 的 文件 。 尽 管 要 获取 的 是 一 个 
文件 ， 但 也 并 非 难事 ， 只 需 和 通常 情况 一 样 ， 事 先 在 释放 区 域 的 dragover 事件 中 执行 preventDefault 即 
可 。 代 码 清单 15.6 是 一 个 具体 的 实现 示例 。 
| 代码 清单 15.6 ”通过 拖 动 操作 来 获取 文件 

element .ondragover = function(event) { 


// 使 拖 动 操作 有 效 


event .preventDefault () ; 










































































和 


element .ondrop = function(event) { 
if (event.dataTransfer.files.length) { 


alert (' 拖 动 了 文件 ' ) ; 
// 获取 第 1 个 File 对 象 
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Var file = event.dataTransfer.files[0]; 
eonsole lo (en 

} else { 

) alert (' 没有 拖 动 文件 ' 


// 防止 浏览 器 打开 文件 


event .preventDefault (); 
hs 
我 们 可 以 通过 引用 files.length 来 判断 是 否 拖 动 了 文件 。files.length 是 被 拖 动 的 文件 的 总 数 。 也 就 是 
说 ， 可 以 1 次 拖 动 并 接收 多 个 文件 。 可 以 通过 下 标 来 引用 各 个 File 对 象 。15.2 节 将 对 File 对 象 的 详细 内 
容 进行 介绍 。 

























































































转 将 文件 保存 至 桌面 程序 
本 节 将 介绍 通过 拖 动 操 作 来 把 文件 从 浏览 器 中 保存 至 桌面 程序 的 方法 。 在 执笔 本 书 时 ， 该 功能 仅 被 
Google Chrome 作为 实验 性 功能 进行 了 实现 。 目 前 还 不 清楚 这 一 功能 今后 将 会 如 何 发 展 ， 不 过 ， 这 是 一 个 








非常 有 用 而 充满 魅力 的 功能 ， 因 此 本 书 将 在 此 对 其 做 简单 介绍 。 

可 以 按 下 面 所 示 的 格式 ， 将 数据 设置 于 dataTransfer， 以 实现 通过 拖 动 操作 将 文件 从 浏览 器 中 保存 至 
桌 下 程序 。 

event .dataTransfer.setData('DownloadURL', 'MIMETYPE: 文件 名 : 文件 URL'); 

通过 这 个 功能 ， 就 能 够 实现 与 原生 应 用 程序 之 间 的 双向 文件 收发 ， 使 在 桌面 环境 中 运行 的 Web 应 用 
程序 的 实用 性 得 到 飞跃 性 提高 。 
代码 清单 15.7 中 是 一 个 文件 下 载 的 实现 示例 。 在 这 个 例子 中 将 download 这 一 链接 拖 动 至 了 桌面 ， 以 
在 桌面 上 保存 该 链接 的 资源 。 
有 代码 清单 15.7 通过 拖 动 操作 实现 文件 的 下 载 


<a href="http://www.example.com/foo.mp3" 
data-downloadurl="audio/mpeg:foo.mp3:http://example.com/foo.mp3" 
class="dragout" draggable="true>download</a> 







































































<a href="http://www.example.com/bar.pdf" 
data-downloadurl="application/pdf:bar.pdf:http://example.com/bar.pdf" 
class="dragout" draggable="true">download</a> 


Sor 
// 获取 所 有 的 dragout 类 
Var files = document .querySelectorAll('.dragout'); 
for (var i = 0, file; file = files[i]; i++) { 
file.addEventListener('dragstart', function(event) { 
// 以 DownloadURL 的 形式 设置 数据 
event .dataTransfer.setData('DownloadURL', this.dataset.downloadurl); 
}, false); 


</eeripes 





专栏 


DataTransferltemList 
本 书 通 过 dataTransfer 的 setData、getData、clearData、types 与 files 属性 来 实现 了 数据 的 收发 传递 。 
而 在 执笔 本 书 时 ，dataTransfer 的 标准 中 又 添加 了 items ( DataTransferltemList 实例 ) 这 一 属性 。 推 荐 大 家 
在 今后 的 数据 收发 传递 中 使 用 这 个 接口 。 
在 执笔 本 书 时 ， 还 没有 浏览 器 对 DataTransferltemList 的 功能 提供 支持 。 不 过 这 是 一 个 重要 的 功能 变更 
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表 A 对 该 接口 进行 了 总 结 。 在 这 里 只 是 整理 了 接口 的 内 容 ， 其 所 含有 的 功能 及 使 用 方法 几乎 没有 变化 ， 因 此 
不 必 过 于 担心 0。 
表 A DataTransferltemList 的 接口 一 览 
接口 含义 
items DataTransferltemList 实例 
items.add(data, format) 添加 数据 
items.add(data) 添加 File 对 象 
items.length 所 添加 的 数据 总 数 的 引 
items[index] 所 添加 的 数据 的 引 
items[index].kind 数据 类 型 的 引用 ( "String 或 file" ) 
items[lindexl].type 数据 格式 的 引 
items[index].getAsString(callback) 义 字 符 串 形式 获取 数据 的 内 容 
items[index].getAsFile() 义 File 对 象 的 形式 获取 数据 
delete items[index] 除 所 添加 的 数据 
items.clear() 除 所 有 已 添加 的 数据 

152 | File API 








国 15.2.1 File API 的 定义 | 


File API” 是 一 种 用 于 获取 在 本 地 保存 的 文件 的 信息 与 内 容 的 API。 在 File API 出 现 之 前 , 我 们 虽然 可 
以 选择 本 地 文件 并 发 送 至 服务 器 ， 但 却 无 法 直接 通过 JavaScript 读 取 文件 的 信息 及 内 容 以 进行 处 理 。 

此 外 ， 虽然 在 本 书 中 不 会 过 多 涉及 ,但 还 有 File API: Writer ”与 File API: Directories and System ”这 两 
个 分 别 用 于 文件 的 写 和 与 文件 夹 结 构 管 理 的 API。 目 前 W3C 正在 对 它们 的 标准 进行 讨论 。” 

由 于 具备 了 这 些 接口 ， 此 前 那些 只 能 由 原生 应 用 程序 实现 的 用 于 编辑 本 地 文件 与 管理 的 程序 也 终于 
能 够 通过 浏览 器 来 实现 了 。 


国 15.2.2 File 对 旬 


转 文件 的 选择 

通过 引用 File 对 象 就 能 够 获取 文件 的 信息 。 为 了 获取 在 桌面 程序 中 保存 的 文件 的 File 对 象 ， 必 须 让 
用 户 显 式 地 选择 文件 。 可 以 以 两 种 方法 来 让 用 户 选 择 文件 。 

@ 通过 拖 动 与 释放 功能 进行 选择 

@ 通过 文件 选择 对 话 框 进行 选择 
通过 拖 动 与 释放 操作 选择 的 方法 ,已 经 在 15.1 节 进 行 了 介绍 ， 在 此 将 仅 介绍 通过 文件 选择 对 话 框 进 
行 选 择 的 方法 。 在 将 input 元 素 的 type 属性 指定 为 "file" 之 后 ， 就 能 够 使 用 操作 系统 提供 的 标准 的 文件 选 
择 对 话 框 。 

如 果 要 改变 对 话 框 的 行为 ， 则 可 以 指定 input 元 素 的 accept 属性 与 multiple 属性 。 通 过 引用 input 元 
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可 以 通过 Modernizr ( http://modernizr.com/ ) 来 检查 浏览 器 是 注 
http://www.w3.0org/TR/FileAPI/ 

http://www.w3.org/TR /file-writer-api/ 

http://www.w3.org/ TR /file-system-api/ 


事实 上 ， 这 两 个 API 的 标准 已 经 基本 确定 ， 现 在 已 经 可 以 在 开发 中 安心 地 使 用 它们 了 。 一 一 译 者 注 
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素 的 files 属性 就 能 够 获取 在 对 话 框 中 选择 的 文件 的 File 对 象 。 如 果 和 希望 在 文件 被 选中 时 就 开始 处 至 
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[== 





则 








可 以 侦 听 input 元 素 的 change 事件 ( 表 15.4 )。 


表 15.4 ” <input type="file"> 的 属性 一 览 
































ee 以 MIME Type 来 指定 允许 选择 的 文件 类 型 。 
可 以 通过 逗号 分 隔 符 来 同时 指定 多 种 文件 类 型 

multiple 人 允许 同时 选择 多 个 文件 

files 含有 所 选择 文件 的 File 对 象 的 数组 

onchange 在 文件 被 选择 时 将 被 执行 的 事件 处 理 程 序 














代码 清单 15.8 是 一 个 例子 ， 在 该 范例 中 ， 将 会 显示 图 像 专 用 的 文件 选择 对 话 术 


件 的 名 称 。 

















[HI 


， 并 能 显示 所 选择 文 











| 代码 清单 15.8 ”图 像 文件 选择 对 话 框 的 实现 示例 


=<Tnput Ey et 
ES 


le" accept="image/*" id="selectFile"> 


document .getElementById('selectFile') .onchange = function(event) { 


// 获取 所 选 图 像 的 File 对 象 


ar ele 


event .target .files[0]; 





// 获取 文件 的 信息 


alert (file. 


sede 

在 代码 清单 15.8 
定 至 某 种 媒体 内 容 ， 
属性 。 而 如 果 和 希望 进 一 
的 形式 来 指定 accept 


























name + ! 已 被 选择 ' ) ; 














中 ，accept 属性 被 指定 为 了 "image/*"。 在 进行 文件 选择 时 ， 常 常会 希望 仅 将 范围 限 
对 于 这 种 情况 ， 可 以 以 audio/* 、video/* 、image/* 这 样 的 别名 的 方式 来 指定 accept 

步 限 定 允 许 选 择 的 图 像 文 件 ， 则 可 以 通过 逗号 分 隔 符 ， 以 "image/png, image/gif" 
属性 所 允许 的 MIME Type。 






































在 选择 了 文件 之 后 就 将 会 执行 onchange 事件 处 理 程序 ， 取 得 所 选 文件 的 File 对 象 。 在 这 个 例子 中 ， 






































对 File 对 象 的 文件 名 进行 了 引用 并 以 提示 的 形式 显示 。 表 15.5 总 结 了 File 对 象 的 接口 ， 之 后 还 将 对 slice 
方法 进行 说 明 。 
表 15.5 ”File 对 象 的 接口 

属性 名 说 明 

name 文件 名 

size 文件 尺寸 ( 单位 byte ) 
type 文件 类 型 ( MIME Type ) 
lastModifiedData 文件 的 最 后 更 新 时 间 
slicel(start end, contentType) 切取 文件 的 一 部 分 
专栏 

关于 <input type="file"> 中 的 value 


<input type="file 











"> 中 的 value 的 值 将 是 所 选 文件 的 名 称 。 不 过 根据 浏览 器 的 不 同 ， 具 体 情 况 也 会 有 所 


在 过 去 的 一 些 浏览 器 中 ， 可 以 通过 value 来 获取 文件 的 完整 路 径 , 但 在 最 近 的 浏览 器 中 ,出 于 安全 性 的 考 
虑 而 无 法 获取 完整 路 径 。 




























































































此 外 ， 有 些 浏览 器 为 了 提供 向 下 兼容 性 ， 而 会 在 路 径 头 部 添加 "CNfakepath\ 。 

































































的 name 属性 。 





这 些 原因 ， 通 常 不 会 引用 <input type='file"> 的 value。 如 果 只 是 希望 获取 文件 名 ， 请 引用 File 对 象 
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国 15.2.s FileReader | 


园 接口 
通过 FileReader 就 可 以 读 取 文件 的 内 容 (数据 )。 可 以 像 下 面 这 样 创建 FileReader 的 实例 来 使 用 。 
Var reader = new FileReader(); 
在 FileReader 中 根据 读 取 数 据 的 形式 而 准备 了 4 种 文件 读 取 方法 。 可 以 将 这 些 方法 的 参数 指定 为 
Blob 对 象 ， 以 实现 异步 的 文件 读 取 。 表 15.6 总 结 了 FileReader 所 具有 的 方法 。 



































表 15.6 FileReader 的 方法 一 览 






































readAsArrayBuffer(blob) 以 ArrayBuffer 的 形式 读 取 文件 
readAsBinaryString(blob) 以 二 进 制 字符 串 的 形式 读 取 文 件 
readAsText(blob [, encoding]) 以 文本 形式 读 取 文件 
readAsDataURL(blob) 以 DataURL 的 形式 读 取 文 件 
abort() 中 止 读 取 














参数 中 所 指定 的 Blob (Binary Large Object ) 是 一 种 可 以 高 效 处 理 大 量 数据 的 接口 。File 对 象 继 承 了 
Blob 的 接口 ， 因 此 可 以 直接 将 这 些 方法 的 参数 指定 为 File 对 象 。 

由 于 文件 的 读 取 处 理 是 异步 的 ， 因 此 需要 对 事件 的 侦 听 进行 实现 ， 以 在 读 取 中 以 及 读 取 完成 后 执行 
所 需 的 处 理 。 表 15.7 总 结 了 FileReader 所 具有 的 事件 处 理 程序 。 


表 15.7 FileReader 的 事件 处 理 程序 一 览 



































































































































事件 说 明 
onloadstart 在 读 取 开 始 时 被 执行 的 事件 处 理 程序 
onprogress 在 读 取 过 程 中 被 定期 执行 的 事件 处 理 程序 
onload 在 读 取 成 功 时 被 执行 的 事件 处 理 程序 
onerror 在 读 取 失败 时 被 执行 的 事件 处 理 程序 
onabort 在 读 取 中 止 时 被 执行 的 事件 处 理 程序 
onloadend 在 读 取 结束 时 被 执行 的 事件 处 理 程序 ( 无 论 是 成 功 还 是 失败 ) 
只 要 设 定 合适 的 事件 处 理 程序 ， 就 能 够 在 读 取 状态 发 生变 化 后 立即 进行 处 理 。 如 果 硕 望 能 在 任意 的 
时 刻 进 行 处 理 ， 则 可 以 引用 readyState 属性 ， 由 自己 来 检查 读 取 的 状态 。 














在 文件 的 读 取 结束 之 后 ， 将 会 把 读 取 的 结果 保存 于 result 属性 中 。 不 过 ， 如 果 文 件 的 读 取 失 败 ， 
result 属性 就 将 会 是 null， 而 错误 信息 则 会 被 保存 于 error 属性 之 中 。 
表 15.8 总 结 了 FileReader 所 具有 的 属性 。 





























表 15.8 ”FileReader 的 属性 一 览 
















































































result 保存 了 读 取 的 结果 

error 保存 了 读 取 失败 时 的 错误 信息 

readyState 表示 读 取 处 理 状态 的 整数 值 

EMPTY readyState 可 以 取得 的 常量 ( 值 为 0 )。 表 示 读 取 开 始 前 

LOADING readyState 可 以 取得 的 常量 ( 值 为 1 )。 表 示 读 取 中 

DONE readyState 可 以 取得 的 常量 ( 值 为 2 )。 表 示 读 取 结 束 ( 无 论 正常 结束 还 是 出 错 ) 
转 文本 文件 的 读 取 








如 果 要 一 下 子 介绍 所 有 的 功能 ， 将 会 使 说 明 变 得 很 复杂 。 我 们 在 此 先 介 绍 一 个 简单 的 例子 。 代 码 清 
单 15.9 中 所 写 的 是 为 了 读 取 文本 文件 所 必需 的 最 低 限 度 的 代码 ， 仅 通过 JavaScript 就 能 以 如 此 简单 的 方 
式 实现 文件 的 读 取 。 不 过 需要 说 明 的 是 ， 这 里 省 略 了 错误 处 理 等 部 分 。 
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上 代码 清单 15.9 文本 文件 的 读 取 
// 以 文本 文件 的 形式 读 取 File 对 象 的 内 容 


Var reader = new FileReader (); 
reader.readAsText (file); 


// 如 果 读 取 成 功 ， 则 将 读 取 结果 以 提示 的 方式 显示 

reader.onload = function(event) { 
Var textData = reader.result; // 或 event.target.result 
alert (textData); 


yp 
转 对 错误 的 处 理 
在 文件 读 取 失 败 时 ， 有 必要 将 这 一 结果 通知 用 户 。 可 以 通过 onerror 
误 。 而 如 果 要 知道 错误 的 原因 ， 则 可 以 引用 FileReader 的 error.code 属性 。 
表 15.9 是 文件 读 取 错误 的 一 览 ， 代 码 清单 15.10 是 捕捉 错误 的 一 个 实现 示例 。 
表 15.9 文件 读 取 错误 一 览 





























有 件 处 理 程序 来 捕捉 读 取 的 错 

















hl 






































属性 名 值 ”说 明 
NOT_FOUND_ERR 1 没有 找到 文件 
安全 性 错误 ( 文件 被 改写 、 正 在 执行 大 量 的 读 取 命令 、 文 件 限制 了 来 自 Web 应 用 程序 的 





























SECURITY_ERR 


ABORT_ERR 
NOT_READABLE_ERR 
ENCODING_ERR 


访问 ) 

文件 的 读 取 被 中 止 ( 使 用 了 abort 方法 等 ) 
没有 文件 的 读 取 权 限 
超过 了 DataURL 的 尺寸 限制 









































All N 








有 代码 清单 15.10 文件 读 取 错 误 的 捕捉 示例 


reader.onerror = function() { 
if (reader.error.code === reader.error.NOT READABLE ERR) { 
alert (' 没有 文件 的 读 取 权限 ' ) ; 
} else if (reader.error.code === reader.error.ABORT ERR) { 
alert (' 文件 的 读 取 被 中 止 ') ; 
} else { 


alert (' 文件 的 读 取 失 败 ') ; 

Ls 

在 上 面 的 代码 中 ， 简 便 起 见 使 用 了 alert 来 通知 错误 。 但 是 强制 加 入 alert 将 会 妨碍 UI 操作， 因此 ， 
对 于 现在 这 种 异步 进行 通知 的 情况 ， 这 并 不 能 说 是 一 种 良好 的 通知 方式 ， 对 此 请 加 以 注意 。 
国 读 取 中 的 处 理 

如 果 文 件 的 读 取 比较 费时 ， 则 有 必要 通知 用 户 现在 正在 读 取 。 可 以 通过 progress 事 
进度 。 表 15.10 总 结 了 能 从 progress 事件 对 象 中 引用 的 信息 。 

表 15.10 progress 事件 对 象 的 属性 一 览 



















































































| 由 
ul 
Ee 


来 获知 读 取 的 
























































属性 名 说 明 
lengthComputable 如 果 文 件 的 长 度 能 够 被 计算 则 为 true， 否 则 为 false 
loaded 已 经 被 读 取 的 数据 尺寸 
total 读 取 目 标的 文件 尺寸 
通过 进度 栏 来 通知 用 户 现 在 正在 读 取 是 一 种 方便 的 做 法 ， 而 且 同 时 还 能 够 告知 用 户 读 取 的 进度 。 代 




















码 清单 15.11 是 一 个 通过 progress 事件 实现 了 进度 栏 的 范例 。 
有 代码 清单 15.11 读 取 中 的 进度 栏 的 实现 示例 


<div Td="progWrap" style="width:200px, height:30px packground:gray ;> 
<div id="progBar" style="width:0, height:30px; background:green;"></div> 
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</div> 


<script 
function readFile(file) { 
Var reader = new FileReader () : 
reader.onprogress = function(event) { 
// 如 果 可 以 计算 文件 的 长 
if (event.lengthComputable) { 
// 计算 进度 并 更 新 进度 栏 的 宽度 值 
var loaded = (event.loaded / event .total) ; 
progBar.style.width = proWrap.offsetWidth * loaded + 'px'; 


疗 























reader.readAsText (file); 


hs em 


园 读 取 文件 的 一 部 分 

读 取 大 容量 的 文件 将 会 花费 很 多 时 间 。 在 诸如 仅 需要 上 次 所 取得 的 文件 的 增 量 的 情况 下 ， 只 读 取 所 
指定 的 增 量 部 分 效率 更 高 。 即 使 是 需要 读 取 整个 文件 ， 如 果 该 文件 能 够 被 分 成 若 各 部 分 处 理 ， 则 只 需 将 
其 分 割 读 取 就 可 以 了 ， 就 能 不 必 等待 整 个 文件 读 取 完成 而 开始 处 理 。 

可 以 通过 File 对 象 的 slice 方法 (在 执笔 本 书 时 仍 是 mozSlice/webkitSlice ) 来 实现 文件 的 部 分 读 取 。 
使 用 slice 方法 可 以 指定 文件 的 分 割 位 置 ， 并 通过 FileReader 仅 读 取 所 指定 的 部 分 。slice 方法 的 返回 值 是 
Blob 对 象 。 由 于 分 割 位 置 是 在 读 取 文件 之 前 指定 的 ， 因 此 即使 是 大 容量 的 文件 ， 也 能 够 实现 仅 对 其 中 的 
一 部 分 进行 高 速 的 读 取 。 

代码 清单 15.12 是 一 个 slice 的 使 用 示例 。 在 这 个 例子 中 ,假设 存在 一 个 以 每 次 向 文件 后 部 添加 数据 的 
儿 式 所 构成 的 文件 ， 就 像 是 日 志文 件 那样 。 那 么 ， 只 要 读 取 上 一 次 所 读 取 部 分 的 增 量 就 能 够 提高 执行 效率 。 


| 代码 清单 15.12 slice 方法 的 使 用 示例 
// 读 取 的 开始 位 置 


Var lastPos = 0; 
















































































Fume ElionnaecDie ee 
// 从 上 一 次 的 读 取 位 置 起 ， 切 取 之 后 的 部 分 


Var blob = file.slice(lastPos, file.size); 


// 保存 本 次 读 取 的 位 置 


Tastpos = fil]e.SL2e; 


// 读 取 切 去 的 部 分 

var reader = new FileReader (); 

reader.onload = function() { /* 进行 一 些 处 理 */ }; 
reader .readAsText (blob) ; 





} 


转 15.2.4 data URL | 


转 data URL 的 定义 
在 此 ， 我 们 将 连同 readAsDataURL 方法 一 起 ， 对 data URL 进行 说 明 。data URL 指 的 是 以 data: 类 型 
始 的 URL。 通 常 的 URL 被 用 于 指示 网 页 或 图 像 等 资源 所 在 的 场所 ， 而 通过 data URL 则 可 以 直接 将 这 
些 资源 中 所 含 的 数据 艇 入 URL 之 中 。 
而 且 由 于 data URL 的 处 理 方式 与 通常 的 URL 是 相同 的 ， 因 此 通过 诸如 将 图 像 转 换 为 data URL 形式 
这 样 的 手段 ， 就 可 以 以 比 在 原生 数据 状态 下 更 为 简单 的 方式 实现 在 HTML 中 对 图 像 进行 处 理 。 


<img src="data:~~~"> 
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<div style="background:url (data:~~~)"></div> 





这 时 ，data URL 在 URL 中 包含 了 数据 ， 因 此 不 会 像 通常 的 URL 那样 ， 产 生 需 要 从 服务 器 获取 图 像 
的 请 求 。 浏 览 器 将 会 解释 该 data URL， 并 将 数据 打开 。 如 果 页 面 中 含有 大 量 小 型 图 像 ， 只 要 通过 将 这 些 图 
























































像 以 data URL 的 形式 仍 人 和 页面 内 ， 就 能 够 减少 对 服务 器 的 请 求 ， 以 减轻 服务 器 的 负载 ， 提 高 显示 速度 。 


国 data URL 的 创建 





























与 通常 的 URL 一 样 ，data URL 也 是 由 普通 的 字符 串 所 组 成 的 ， 因 此 可 以 通过 JavaScript 来 自由 地 
组 成 data URL。 这 意味 着 只 需要 通过 JavaScript 就 可 以 创建 出 各 种 类 型 的 资源 ， 从 而 进一步 提升 了 data 
URL 的 魅力 。 
data URL 的 书写 格式 如 下 所 示 。 


















































data: [<MIME 





Type>] [;base64] ,<data> 





uy 





编码 ， 将 二 进 人 
ASCII 字符 串 来 指定 <data>。 
我 们 可 以 通过 encodeURIComponent 函数 来 进行 URL 编码 ， 通 过 btoa 函数 (Binary to ASCII ) 来 进 


Base64 是 一 种 编码 方式 ， 它 可 以 仅 通过 64 种 英文 与 数字 字符 ,来 将 多 位 字符 或 二 进 制 数据 等 内 容 
编码 为 相应 的 字符 串 。 例 如 ， 如 果 要 以 图 像 这 类 的 二 进 制 数 据 来 创建 data URL， 则 首先 需要 通过 Base64 
半数 据 转换 为 可 以 作为 URL 使 用 的 字符 串 。 如 果 省 略 了 [;base64]， 则 将 会 以 URL 编码 的 




































































行 Base64 编码 。 代 码 清单 15.13 是 一 个 创建 data URL 的 示例 。 代 码 清单 15.13 中 所 示 的 三 个 例子 都 将 在 
浏览 器 中 显示 "Hello, world!"。 


| 代码 清单 








// 文本 数据 的 创 寻 


document .locat 


// HTML 数据 的 包 
var data = enc 
document .locat 








15.13 ”data URL 的 创建 示例 


BE ( 通过 URL 编码 ) 
ion = 'data:,Hello%2C%20world!'; 


建 ( 通过 URL 编码 ) 
odeURIComponent ('<hl>Hello, world!</h1l>'); 
ion = 'data:text/html,' + data; 





// HTML 数据 的 包 
Var data = po 
document .locat 


建 (通过 Base64 编码 ) 
a('<hlSsHello, world!</h1i>'); 
ion = 'data:text/html;base64,' + data; 


国 readAsDataURL 方法 


FileReader 提供 
































了 readAsDataURL 这 一 方法 ， 用 于 以 data URL 的 形式 来 读 取 文 件 的 内 容 。 由 于 是 以 














URL 的 形式 来 处 理 所 读 取 的 文件 ， 因 此 在 HTML 中 对 文件 进行 处 理 也 变 得 非常 简单 了 。 代 码 清单 15.14 
是 一 个 例子 ， 这 一 范例 将 拖 动 至 浏览 器 中 的 图 像 设 定 为 了 页 面 的 背景 图 像 。 


| 代码 清单 15.14 readAsDataURL 方法 的 使 用 示例 








document .body. 


// 使 drop 























ondragover = function(event) { 


有 效 


event .preventDefault ()，; 


document .body. 


ondrop = function(event) { 


event .preventDefault ()，; 


// 获取 被 拖 


动 的 文件 的 File 对 象 


var file = event.dataTransfer.files[0]; 


// 以 aata 


URL 的 形式 读 取 被 拖 动 的 文件 


Var reader = new FileReader(); 
reader.readAsDataURL (file) ; 
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reader.onload = function() { 
// 获取 data URL 


Var dataURL = reader.result; 





// 将 data URL 设 定 为 背景 
document .body.style.background = 'url(' + dataURL + ')'; 





// 将 data URL 保存 至 localstorage 
localStorage.background = dataURL; 


} 


window.onload = function() { 
if (localStorage.background) { 
document .body.style.background = 'url('+ localStorage.background + ')'; 


} 
} 
从 代码 清单 15.14 中 我 们 可 以 看 出 ， 可 以 以 与 通常 的 URL 一 样 的 方式 ， 对 通过 readAsDataURL 读 取 
的 数据 进行 处 理 。 而 且 data URL 只 是 单纯 的 字符 串 ， 因 此 也 可 以 将 其 直接 保存 于 localStorage 等 处 。 

data URL 正 是 这 样 一 种 让 人 感到 其 无 限 可 能 性 的 技术 。 只 要 肯 花 功夫 ， 就 能 够 在 不 借助 于 服务 器 的 
情况 下 实现 各 种 各 样 有 趣 的 功能 。 


























国 15.2.5 FileReaderSync | 


FileReaderSync 是 一 种 用 于 同步 读 取 文件 内 容 的 API。 所 谓 同步 读 取 ， 指 的 是 文件 读 取 方法 的 返回 值 
直接 就 是 读 取 的 结果 。 与 异步 读 取 后 再 通过 事件 处 理 程序 对 数据 进行 处 理 的 FileReader 相 比 ， 这 种 方式 
实现 起 来 较为 简单 。 

我 们 可 以 在 Web Workers (参见 第 18 章 ) 的 环境 下 使 用 FileReaderSync。 在 Worker 内 使 用 的 话 ， 就 
不 必 担 心 同 步 读 取 大 型 文件 可 能 会 引起 UI 的 假死 。 当 然 ， 在 Worker 中 也 是 能 够 使 用 FileReader 的 。 表 
15.11 总 结 了 FileReaderSync 的 接口 。 




































































表 15.11 FileReaderSync 的 接口 一 览 























可 | 说 明 

readAsArrayBuffer(blob) 以 ArrayBuffer 的 形式 获取 文件 的 内 容 
readAsBinaryString(blob) 以 二 进 制 数据 的 形式 获取 文件 的 内 容 
readAsText(blob [, encoding]) 以 文本 形式 获取 文件 的 内 容 
readAsDataURL(blob) 以 DataURL 的 形式 获取 文件 的 内 容 























可 以 获取 的 数据 形式 的 种 类 与 参数 的 指定 方式 都 与 FileReader 相同 。 不 过 ， 在 调用 方法 时 方法 的 返 
回 值 所 返回 的 就 是 所 读 取 的 数据 。 如 果 读 取 失 败 ， 则 将 抛 出 异常 ， 这 时 需要 通过 try/catch 来 进行 处 理 ， 
或 者 在 Worker 的 创建 者 中 对 Worker 实例 的 onerror 事件 进行 侦 听 以 做 出 处 理 。 

在 代码 清单 15.15 的 范例 中 ， 在 主线 程 中 由 用 户 选择 的 File 对象 将 在 Worker 内 被 接收 ， 由 
FileReaderSync 来 读 取 文件 内 容 并 进行 处 理 。 这 里 对 从 File 对 象 的 接收 到 文件 内 容 的 读 取 的 整个 过 程 进 
行 了 实现 。 值 得 注意 的 是 ， 与 FileReader 相 比 ， 这 种 实现 方式 非常 简单 。 

有 代码 清单 15.15 文件 同步 读 取 的 示例 
self.onmessage = function(event) { 
Var file = event.data; 


Var reader = new FileReaderSync (); 
var data = reader.readAsText (file); 


/* 进行 一 些 处 理 */ 
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本 章 讲解 Web Storage 与 Indexed Database 这 两 种 能 够 在 浏览 器 中 使 用 的 存储 技术 。 由 于 这 
些 技术 的 出 现 ， 永 久 数 据 管理 这 一 过 去 完全 由 服务 器 端 执 行 的 工作 也 能 够 在 客户 端 得 以 实现 ， 
从 而 可 以 根据 情况 选择 合适 的 实现 方式 。 


16.1 | Web Storage 





大 16.1.1 Web Storage 的 定义 | 


Web Storage 是 一 种 可 以 简单 地 将 JavaScript 所 处 理 的 数据 永久 保存 的 接口 。 近 年 来 ， 出现 了 Web 
Storage 等 多 种 客户 端 存储 技术 。 于 是 ， 可 以 不 用 再 像 过 去 那样 必须 通过 服务 器 才能 进行 数据 的 读 写 操作 。 
由 于 这 些 技术 很 好 地 去 除了 与 服务 器 的 通信 部 分 ， 因 此 人 们 可 以 享受 到 性 能 的 提高 、 开 发 手续 的 削 
减 、 离 线 操 作 的 实现 等 各 个 方面 的 优点 。 

特别 是 Web Storage， 它 非常 容易 使 用 ， 标 准 也 已 经 确定 ,浏览 器 对 其 的 支持 情况 也 较为 完善 。 从 各 
方面 来 看 ， 它 在 HTML5 相关 的 API 中 属于 是 一 种 能 被 用 于 实际 服务 中 的 使 用 门槛 很 低 的 API， 且 已 经 
被 用 于 很 多 服务 中 。 它 的 功能 是 极 具 魅力 的 ， 对 于 初次 接触 HTML5 的 人 来 说 ， 这 是 一 个 很 好 的 切 人 点 。 

Web Storage 具有 以 下 这 些 特征 : 

@ Key-Value 型 的 简单 的 存储 方式 ; 
@ 能 够 以 与 普通 的 JavaScript 对 象 相同 的 方式 来 进行 读 写 操 作 ; 
@ ( 与 Cookie 相 比 ) 能 够 保存 大 容量 的 数据 。 

不 过 Web Storage 并 没有 提供 诸如 创建 用 于 搜索 的 下 标 或 进行 事务 处 理 等 功能 。 如 果 需 要 在 客户 端 进 

行 功能 更 复杂 的 数据 管理 ， 则 要 使 用 Indexed Database、Web SQL Database 或 File Writer API 等 方法 。 

园 Web Storage 的 容量 

虽然 Web Storage 的 标准 中 没有 限制 其 可 能 的 保存 容量 ， 但 大 部 分 的 浏览 器 都 是 以 SMB 为 上 限 对 该 
功能 进行 实现 的 。 尽 管 在 一 些 浏览 器 中 也 可 以 根据 用 户 设 定 来 更 改 这 一 上 限 ， 不 过 对 于 面向 一 般 用 户 公 
开 的 Web 应 用 程序 ， 还 是 应 该 意识 到 这 一 限制 。 

此 外 ， 在 Web Storage 中 ， 为 每 个 源 (参见 之 后 的 专栏 ) 准备 了 共享 的 存储 空间 。 即 使 是 不 同 的 服 
务 ， 只 要 它们 的 源 是 相同 的 ， 就 能 够 共享 存储 。 因 此 ， 有 时 1 个 服务 可 以 使 用 的 容量 将 不 足 5MB， 对 此 
请 加 以 注意 。 

国 localStorage 与 sessionStorage 

Web Storage 的 实体 是 在 全 局 对 象 中 定义 的 localStorage 与 sessionStorage 这 两 种 对 象 。 只 要 像 通常 的 
对 象 那样 对 其 属性 进行 读 写 ， 就 能 使 所 保存 的 数据 在 页 面 跳 转 时 也 不 会 丢失 。 

localStorage 与 sessionStorage 的 区 别 在 于 数据 的 生存 周期 。 对 于 在 localStorage 中 保存 的 数据 来 
说 ， 只 要 没有 被 显 式 地 删除 ， 即 使 浏览 器 或 计算 机 执行 了 重启 ， 这 些 数据 也 不 会 丢失 。 而 另 一 方面 ， 在 
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sessionStorage 中 ， 数 据 仅 能 在 同一 个 会 话 内 得 以 保留 。 下 面 简单 总 结 了 sessionStorage 的 生存 周期 。 
〇 共享 sessionStorage 的 情况 





@ 通常 的 页 面 跳 转 时 

@ 在 iframe 内 打开 了 子 页 面 
@ 从 奔 溃 中 恢复 时 

@ 重新 载 入 时 


〇 没有 共享 sessionStorage 的 情况 
@ 在 新 窗口 或 新 标签 页 中 打开 了 页 面 
@ 窗口 被 关闭 后 又 被 重新 打开 时 


专栏 





源 的 定义 























源 ( origin ) 指 的 是 由 协议 、 主 机 名 与 端口 号 所 组 成 的 标识 符 。 在 Web Storage 中 保存 的 数据 只 能 被 在 同 












































一 个 源 中 执行 的 程序 所 共享 。 在 不 同 的 源 中 执行 的 程序 之 间 不 能 相互 引用 其 Web Storage。 


























这 种 只 有 在 同 源 的 情况 下 才 人 允许 访问 的 规则 称 为 同 源 策略 。 反 之 ， 从 是 否 能 在 不 同 的 源 之 间 安 全 地 进行 

































































访问 的 角度 来 看 ， 则 会 用 到 Cross-Origin Resource Sharing ( CORS、 跨 源 资源 共享 ) 这 样 的 术语 。 源 是 一 








个 在 HTML5 相关 技术 的 安全 性 问题 中 经 常 被 用 到 的 术语 ， 请 对 此 加 以 牢记 。 
hitp://foo.example.com/test.html // 原 页 面 
hitp://foo.example.com/test2.html // 同 源 
hitp://foo.example.com/bar/test.html // 同 源 
hitp://bar.example.com/test.html // 跨 源 
hitp://foo.example.com:8080/test.html // 跨 源 
https:/foo.example.comy/test.html // 跨 源 





















































国 16.1.2 基本 操作 | 


本 节 之 后 将 介绍 











Web Storage 的 基本 操作 。 这 里 所 介绍 的 范例 代码 都 是 使 用 的 localStorage， 而 对 于 














sessionStorage 的 情况 ， 操 作 方 法 也 是 完全 相同 的 。 


转 数据 的 读 写 
可 以 通过 setItem 






































方法 将 数据 保存 至 localStorage， 并 通过 调用 getItem 方法 来 引用 数据 。 此 外 ，Web 





Storage 也 提供 了 可 以 对 值 进行 读 写 的 语法 糖 ， 其 操作 方法 与 通常 的 对 象 相同 。 代 码 清单 16.1 是 一 个 示例 。 
有 代码 清单 16.1 数据 的 保存 与 引用 





// 数据 的 保存 。 以 1 


下 3 行 是 等 价 的 


localStorage.setItem('foo', 'bar'); 
loocalstorage foo = "pars 
oocalstoragelutoonl = "par 


// 数据 的 引用 。 以 1 
Var data 
var data 
var data 


下 3 行 是 等 价 的 


localStorage.getIitem('foo'); 
localSstorage .foo; 
localStoragel'foo']; 








中 即 数据 将 会 在 何 时 丢失 。 





译 者 注 
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如 果 指 定 了 一 个 不 存在 的 键 并 试图 引用 ， 则 会 返回 null 值 。 而 对 于 通常 的 对 象 来 说 ， 如 果 指 定 了 一 
个 不 存在 的 键 并 试图 引用 ， 返 回 的 将 是 undefined 值 。 对 这 一 差别 大 家 需要 加 以 注意 "。 

此 外 ，localStorage 只 能 够 对 字符 串 进行 读 写 。 虽 然 根据 W3C 的 标准 ，Web Storage 是 可 以 保存 任意 
的 对 象 的 ， 不 过 截至 执笔 本 书 时 ， 还 没有 浏览 器 对 此 进行 了 实现 。 不 过 ， 通 过 JSON.stringify 与 JSON. 
parse 方法 ， 就 可 以 在 几乎 不 费 功 夫 的 情况 下 实现 对 任意 对 象 的 完整 保存 ( 代码 清单 16.2 )。 


| 代码 清单 16.2 ”对 字符 串 以 外 的 数据 进行 读 写 


// 任意 的 对 象 
Waon 


// 将 对 象 转换 为 JSON 字符 串 并 保存 


localStorage.foo = JSON.stringify (obj); 
// 将 所 保存 的 JSON 字符 串 还 原 为 对 象 
var obj2 = JSON.parse (localStorage.foo); 
图 数据 的 删除 
可 以 通过 调用 removeltem 方法 来 删除 所 保存 的 值 。 此 外 ，Web Storage 也 提供 了 可 以 对 值 进 行 删除 
操作 的 语法 糖 ， 其 操作 方法 与 通常 的 对 象 相 同 。 代 码 清 单 16.3 是 一 个 示例 。 
有 代码 清单 16.3 数据 的 开除 
// 将 'foo' 这 个 键 所 保存 的 值 删除 


localStorage.removeltem('foo'); 
delete localStorage.foo; 
delete localStorage[l'foo']; 


如 果 指 定 的 是 一 个 不 存在 的 键 ， 则 不 会 有 任何 效果 。 如 果 希 望 一 次 删除 所 有 保存 于 localStorage 中 的 
值 ， 则 可 以 调用 clear 方法 。 

localStorage.clear (); 
图 数据 的 枚 举 

可 以 通过 key 方法 与 length 属性 来 枚 举 保存 于 Web Storage 中 所 有 的 数据 。 其 中 length 是 用 于 引用 所 
保存 的 键 的 总 数 的 属性 ， 而 key 则 是 用 于 引用 参数 所 指定 的 下 标的 键 的 方法 。 代 码 清单 16.4 是 一 个 示例 。 
有 代码 清单 16.4 数据 的 枚 举 

// 枚 举 所 有 被 保存 的 数据 


for (var i = 0; i < localStorage.length; i++) { 
Var key = localStorage.key (i), 
Value = localStorage [key]; 


/* 进行 一 些 处 理 */ 






























































































































































} 

不 过 需要 注意 的 是 ， 通 过 key 方法 返回 的 键 并 不 一 定 是 保 序 的 。 在 进行 值 的 添加 或 删除 操作 时 ， 浏 览 
器 可 能 会 改变 key 的 顺序 。 反 过 来 说 ， 只 要 没有 进行 值 的 添加 或 删除 操作 ， 则 将 一 定 会 保持 原 有 的 顺序 。 

此 外 还 可 以 通过 for ip 语句 来 枚 举 所 有 的 键 。 不 过 这 种 情况 下 ， 如 果 癌 Objectprototype 等 对 象 中 添加 了 
时 性 ， 则 会 被 一 起 枚 举 。 因 此 需要 通过 hasOwnProperty 方法 只 引用 直接 属性 。 代 码 清单 16.5 是 一 个 示例 。 
代码 清单 16.5 ”通过 for in 语句 枚 举 数据 


for (var key in localStorage) { 























































































































JE | 
遇 





四” 截 至 执笔 本 书 时 ， 对 于 在 Chrome 中 对 一 个 不 存在 的 键 进行 引用 的 情况 ， 如 果 使 用 的 是 getItem 方式 则 将 返回 null 值 ， 如 果 
使 用 的 是 属性 访问 方式 则 会 返回 undefined 值 。 这 一 方面 的 实现 应 该 会 在 今后 得 到 很 好 的 统一 ， 不 过 目前 仍 应 对 此 多 加 注意 。 
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// 仅 引 用 直接 属性 
if (localStorage.hasOwnProperty (key)) { 
Var Value = localStorage [key]; 


/* 进行 一 些 处 理 */ 

















} 


国 16.1.3 storage 事件 l 


在 某 个 窗口 中 更 改 了 Web Storage 中 的 数据 之 后 ， 将 会 在 除了 更 改 数据 的 窗口 之 外 所 有 的 窗口 中 触发 storage 
事件 。 通 过 捕捉 该 storage 事件 并 加 以 适当 的 处 理 ， 就 能 够 在 多 个 同时 打开 的 窗口 之 间 确 保 数据 的 一 致 性 。 

例如 ， 通 过 在 新 标签 页 中 打开 的 设 定 页 面 来 更 新 存储 时 ， 可 以 通过 捕捉 并 处理 storage 事件 以 使 其 他 
所 有 标签 页 都 能 获知 设 定 的 更 改 并 执行 UI 的 更 新 处 理 ， 从 而 避免 与 存储 数据 之 间 产 生 不 一 致 。 表 16.1 


































































































是 storage 事件 对 象 的 属性 一 览 ， 而 代码 清单 16.6 则 是 storage 事件 的 使 用 示例 。 


















































表 16.1 storage 事件 对 象 的 属性 一 览 
key 被 更 新 的 键 名 
oldValue 更 新 前 的 值 
newValue 更 新 后 的 值 
url 被 更 新 的 页 面 的 URL 
storageArea localStorage 或 sessionStorage 














| 代码 清单 16.6 storage 事件 的 使 用 示例 


window.addEventListener('storage', function(event) { 











TELUewenEese = = semidy 
Var msg = ' 你 好 ，' + event.newValue + ' 先生 /女士 '; 
document .getElementBylid('msg') .textContent = msg; 
} 
Pe 


国 16.1.4 关于 cookie | 


直 以 来 ， 说 起 在 浏览 器 中 保存 数据 的 方法 ， 我 们 通常 都 会 想到 利用 Cookie 来 实现 的 方法 。 在 不 支 
持 Web Storage 的 浏览 器 中 ， 则 可 以 通过 Cookie 来 实现 数据 的 永久 保存 。 作 为 参考 ， 代 码 清单 16.7 介绍 
了 Cookie 的 使 用 方法 。 
不 过 由 于 Cookie 有 以 下 特点 ， 因 此 在 实际 上 很 少 能 够 被 用 作 Web Storage 的 替代 品 。 
@ 容量 上 限 非 常 小 ， 只 有 4KB， 因 此 无 法 保存 较 大 的 数据 
@ 向 服务 器 发 送 请 求 时 Cookie 将 被 一 起 发 送 
@ 常用 于 保存 会 话 信息 等 重要 的 信息 


| 代码 清单 16.7 ”Cookie 的 使 用 方法 



















































































// 值 的 保存 

document .cookie = 'foo=1'; 

console.log(document .cookie); // ->'fo0=1' 

// 值 的 保存 ( 具有 1 小 时 的 期 限 ) 

document .cookie = 'bar=2; expires=' + new Date (Date.now()+3600000) .toGMTString(); 
console.log(document .cookie); // ->'fo00=1; bar=2' 

// 值 的 删除 

document .cookie = 'foo=; expires=' + new Date() .toGMTString(); 
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console.log (document .cookie); // ->'bar=2' 
// 1 小 时 之 后 
setTimeout (function() { 
console.log (document .cookie); Mp 
}, 3600000); 


国 16.1.5 命名 空间 的 管理 


只 要 没有 显 式 地 删除 localStorage 中 的 数据 ， 这 些 数据 就 不 会 被 重 置 。 因 此 ， 如 果 把 它们 当 作 本 地 变 
量 来 使 用 ， 而 胡乱 地 添加 了 过 多 属性 ， 就 将 会 使 今后 的 管理 变 得 十 分 困难 。 如 果 没 有 对 属性 名 进行 有 序 













































































管理 


生 属性 名 的 冲突 等 问题 。 


虽 












































行 删 除 管理 的 麻烦 。 而 对 于 使 用 localStorage 的 情况 ， 为 了 便于 管理 ， 应 该 尽 可 能 地 理 清 最 外 























如 果 没 有 什么 特别 的 原因 ， 建 议 按照 代码 清单 16.8 的 方式 ， 在 使 用 时 为 每 个 服务 分 别 准备 一 个 





| 代码 清单 16.8 ”以 服务 为 单位 进行 命名 空间 的 管理 


Var SERVICE NAME = 'SERVICE NAME', 
storage = null; 


// 通过 load 事件 读 取 数据 至 本 地 变量 


window.onload = function() { 
Ea 4 
storage = JSON.parse (localstorage [SERVICE NAME] || '{}'); 


baaten(e) nt 
storage = {}; 
} 
be 


// 通过 beforeunload 事件 将 数据 写 入 localstorage 
window.onbeforeunload = function() { 

localStorage [SERVICE NAME] = JSON.stringify(storage); 
}; 


























， 就 可 能 会 在 用 户 的 本 地 环境 中 积累 下 很 多 不 需要 的 垃圾 数据 ， 还 有 可 能 会 在 使 用 同 源 的 服务 时 产 


对 于 通过 sessionStorage 就 能 够 实现 功能 的 情况 ， 则 最 好 使 用 sessionStorage， 这 样 就 能 省 去 对 数据 进 
层 的 属性 名 。 


命名 空间 。 








通过 代码 清单 16.8 这 样 的 方式 ， 就 能 在 启动 时 和 结束 时 自动 地 同步 localStorage 与 本 地 变量 ( 在 本 





例 中 即 storage 变量 )， 因 此 在 一 般 情况 下 只 需要 读 取 本 地 变量 的 内 容 即 可 。 而 且 与 本 地 变量 相 比 ， 对 





























localStorage 的 读 写 速 度 较 慢 ， 因 此 对 于 将 会 频繁 地 访问 存储 的 应 用 程序 来 说 ， 这 种 方式 还 可 能 提高 程序 


的 性 能 。 


不 过 ， 对 于 多 个 标签 页 之 间 数 据 不 一 致 的 问题 ， 则 必须 在 合适 的 时 机 将 本 地 变量 中 的 数据 写 入 
localStorage 之 中 以 进行 同步 。 这 时 需要 捕获 storage 事件 ， 将 在 其 他 标签 页 中 执行 的 localStorage 更 新 操 





























作 同 步 至 本 地 变量 。 代 码 清单 16.9 是 一 个 示例 。 
| 代码 清单 16.9 ”多 个 标签 页 之 间 的 数据 同步 


// 在 更 改 设 定时 将 其 写 入 localstorage 

function setStorage (key, value) { 

storage [key] = value; 

localStorage [SERVICE NAME] = JSON.stringify(storage); 

















} 
// 将 在 其 他 标签 页 中 进行 的 1ocalStorage 更 改 读 入 本 地 变量 


window.onstorage = function (event) 
if (event.key === SERVICE NAME && event .newValue) { 
storage = JSON.parse (event .newValue); 
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国 16.1.6 版 本 的 管理 
在 localStorage 的 实际 使 用 中 ， 必 然 会 发 生 需 要 更 改 结构 描述 的 情况 。 然 而 localStorag 
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e 的 数据 是 保 


存 于 客户 端的 ， 因 此 无 法 像 在 服务 器 端的 数据 库 中 那样 自由 地 更 改 数据 。 如 果 要 使 管理 有 序 ， 可 以 尝试 




















采用 代码 清单 16.10 这 样 的 版 本 管理 方式 。 
有 代码 清单 16.10 iocalstorage 的 版 本 管理 的 例子 


window.onload = function() { 
if (!localStorage.version) { 
/ 添加 属性 
localStorage.foo 
localSstorage.bar 


// 更 新 版 本 


TocanlsStorager verslone uo 








ons 
bar 








} 


jean torad nvr oe 

// 整合 单独 设置 的 属性 

localStorage.foobar = JSON.stringify({ 
foor localSstorage. foo, 
bar: localStorage.bar 

De 

// 删除 属性 

delete localStorage.foo; 

delete localStorage.bar; 


// 更 新 版 本 


locanlstoradgeR verslon 0 




















} 


国 16.1.7 ”对 localStorage 的 模拟 




















localStorage 已 经 在 很 多 浏览 器 中 得 到 了 实现 ， 在 各 种 HTML5 相关 API 中 它 是 较 易 正 式 使 用 的 一 种 。 


不 过 由 于 正 6 与 正 7 并 不 支持 localStorage， 因 此 为 了 对 这 些 浏览 器 提供 支持 必须 采取 一 些 对 策 。 




















这 里 所 采用 的 方法 是 在 未 提 供 支持 的 浏览 器 的 全 局 作用 域 中 创建 一 个 localStorage 对 象 ， 并 模拟 

















localStorage 中 各 个 方法 的 功能 。 通 过 这 种 方式 ， 就 能 够 在 不 更 改 现 有 程序 的 情况 下 使 其 能 够 
localStorage 的 浏览 器 中 。 这 样 ”来 就 避免 了 使 用 条 件 判 断 语句 而 使 程序 变 得 不 必要 地 复杂 。 
代码 清单 16.11 是 一 个 对 localStorage 进行 模拟 的 实现 的 示例 。 


| 代码 清单 16.11 对 localStorage 的 模拟 


























window.localStorage = window.localStorage || (function() { 
var storage = {}; 
return { 
setItem: function(key, value) { 
storage[lkey] = value; 


getItem: function (key) { 
return storage [key] ; 


zemoveItem: function(key) { 
delete storage [key] ; 
广 


clear: function() { 
storage = {}; 


灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 





运行 于 不 支持 


@ 280 一 一 一 第 4 部 分 HTML5 


enulabed: true 
bn 
代码 清单 16.11 的 例子 并 没有 实现 数据 的 永久 保存 功能 。 本 来 ,使 用 了 localStorage 的 应 用 程序 需要 
在 localStorage 为 空 的 状态 下 也 能 够 正常 运行 ， 因此， 即使 存储 在 访问 过 程 中 被 重 置 ， 运 行 也 不 会 出 错 。 
如 有 必要 ， 可 以 同时 借助 Cookie 或 Flash 来 模拟 数据 的 永久 保存 功能 。 


16.2 Indexed Database 


冯 16.2.1 Indexed Database 的 定义 | 


Indexed Database" 是 一 种 在 浏览 器 中 通过 JavaScript 进行 操作 的 功能 强大 的 数据 库 。 之 前 介绍 的 Web 
Storage 虽然 具有 使 用 简便 的 特点 ， 但 并 没有 提供 创建 用 于 检索 的 索引 以 及 事务 的 功能 。Indexed Database 是 
种 用 于 在 客户 端 实现 更 大 规模 的 复杂 数据 管理 的 技术 ， 其 标准 的 制订 也 正在 进行 中 。 
如 今 ，Web SQL Database ( 参见 专栏 ) 的 标准 制订 已 中 止 ，Indexed Database 便 成 了 可 以 在 客户 端 使 
用 的 功能 强大 的 数据 库 的 唯一 选项 。 其 标准 制订 与 浏览 絮 的 实现 情况 的 动向 也 因此 广 受 瞩 上 日 。 尽 管 其 标 
准 和 实现 都 还 没有 最 终 确 定 ， 但 它 确 实 是 一 种 重要 的 API， 因 此 ， 本 书 将 用 一 些 篇 幅 来 介绍 这 一 概念 。 
所 刊 的 代码 在 Chrome14 与 Firefox6 中 进行 了 验证 运行 。 


专栏 


关于 Web SQL Database 

Web SQL Database ( http://www.w3.org/TR/webdatabase/ ) 是 一 种 运行 于 浏览 器 中 的 关系 数据 库 。 通 
过 其 名 称 也 可 以 知道 ， 它 可 以 通过 SQL 语句 来 执行 数据 的 插入 及 检索 等 操作 。 虽 然 Web SQL Database 比 
Indexed Database 地 开始 进行 标准 的 制定 与 浏览 器 的 实现 , 不 过 由 于 它 的 标准 和 实现 十 分 依赖 于 SQLite 
这 一 SQL 语言 的 变 体 ， 因 此 也 有 很 多 人 对 此 持 以 质疑 。 如 今 ，Web SQL Database 的 标准 制订 已 经 中 止 。 
过 , 现在 已 经 能 够 在 Chrome、Safari 以 及 Opera 中 使 用 Web SOL Database 了 。 由 于 IE 及 Firefox 尚 
没有 对 其 提供 支持 ， 因 此 我 们 难以 在 针对 PC 的 服务 中 使 用 Web SQL Database,， 不 过 ,iOS 及 Android 设备 
则 几乎 是 得 到 了 完全 的 支持 。 移 动 设备 通信 线路 的 速度 较 慢 ， 因 此 本 地 数据 库 将 带 来 很 大 的 优势 。 而 且 目 前 
Indexed Database 也 尚未 达到 可 以 实际 应 用 的 阶段 ， 因 此 有 不 少 服务 都 使 用 了 Web SQL Database。 

































































































































































































































































































































































































































































































































































国 16.22 基础 架构 | 


Indexed Database 和 Web Storage 一 样 ， 仅 具有 在 同一 个 源 中 执行 的 程序 所 共享 的 空间 。 在 1 个 源 所 
拥有 的 空间 中 可 以 创建 多 个 数据 库 ， 而 在 1 个 数据 库 中 又 可 以 创建 多 个 对 象 存储 〈 ObjectStore )。 

对 象 存 储 是 一 种 用 于 保存 数据 的 容器 ， 在 对 象 存储 中 可 以 保存 任意 类 型 的 JavaScript 对 象 。 为 了 
便于 理解 ， 我 们 可 以 认为 在 关系 数据 库 所 说 的 表 对 应 的 就 是 对 象 存 储 ， 而 表 的 行 所 对 应 的 就 是 任意 的 
JavaScript 对 象 。 

在 对 象 存储 中 ， 我 们 可 以 为 所 保存 的 JavaScript 对 象 的 任意 属性 创建 索引 ， 且 可 以 同时 创建 多 个 索 
引 。 通 过 索引 的 创建 ， 就 能 够 对 相应 的 属性 进行 指定 范围 的 高 速 检 索 。 

图 16.1 总 结 了 当前 已 经 提 及 的 mdexed Database 的 结构 组 成 。 
























































OD http://www.w3.org/TR/IndexedDB 
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| 16.1 Indexed Database 的 组 成 图 





索引 
IDBIndex 














国 16.2.3 连接 数据 库 l 


我 们 可 以 通过 调用 indexedDB 对 象 的 open 方法 来 连接 数据 库 (IDBDDatabase 实例 )。 由 于 连接 是 以 
异步 的 方式 执行 的 ， 因 此 可 以 侦 听 open 所 返回 的 请 求 对 象 (IDBRequest ) 的 success 事件 与 error 事件 。 
如 果 连 接 成 功 ， 则 将 执行 onsuccess 事件 处 理 程 序 ， 并 能 够 对 数据 库 进 行 引用 。 

在 执笔 本 书 时 ，indexedDB 尚未 取消 其 开发 商 前 级 ， 因 此 需要 稍 作 一 些 事 前 准备 工作 (代码 清单 
16.12 )。 代 码 清单 16.13 是 从 开始 直至 完成 与 数据 库 的 连接 的 范例 代码 。 

有 代码 清单 16.12 对 indexedDB 的 开发 商 前 绥 进 行 支持 
var indexedDB = window.indexedDB || 


window.webkitIndexedDB || 
window.mozIndexedDB; 
























































| 代码 清单 16.13 ”连接 数据 库 
Nar db cel 


// 连接 数据 库 

Var request = indexedDB.open('testdb'); 

// 连接 数据 库 成 功 

request .onsuccess = function(event) { 
// 使 之 可 以 通过 全 局 变量 db 引用 数据 库 


db = event .target .result; 














人 
// 连接 数据 库 失 败 


request .onerror = function(event) { 


alert (' 连接 数据 库 失败 ' ) ; 


国 16.2.4 ”对象 存储 的 创建 | 


在 读 写 数据 之 前 ， 首 先 需 要 创建 对 象 存 储 这 一 用 于 保存 数据 的 容器 。 我 们 可 以 通过 调用 
createObjectStore 方法 来 创建 对 象 存储 。 只 能 够 在 数据 库 的 版 本 更 改 事务 中 执行 createObjectStore， 对 此 
请 加 以 注意 。 在 调用 了 setVersion 方法 之 后 将 会 自动 地 在 内 部 开始 该 事务 。 代 码 清单 16.14 是 一 个 示例 。 

‖ 代码 清单 16.14 对 象 存储 的 创建 
// 更 改 DB 的 版 本 
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Var request = db.setVersion('1.0'); 


request.onsuccess = function(event) { 
// 创建 对 象 存储 
Var store = db.createObjectStore('books', { 
keypPath: ' id', 
autolneorement Erue 


gs 





bs 
createObjectStore 的 第 1 个 参数 所 指定 的 是 对 象 存 储 的 名 称 。 在 这 里 色 








上 建 的 是 一 个 名 为 book 的 对 象 





存储 。 其 第 2 个 参数 是 与 键 相关 的 设 定 。 这 里 将 keyPath 指定 为 了 _id， 








将 autoIncrement 设 为 了 true， 











于 是 在 向 对 象 存储 中 添加 数据 时 将 会 自动 加 上 能 够 自动 增加 的 _id 属性 。 








根据 键 的 设 定 方式 不 同 ， 添 加 数据 时 的 行为 也 会 有 些 差异 。 依 照 autoIncrement 是 true 还 是 false， 以 














及 keyPath 是 否 被 指定 ， 总 共 可 以 组 成 4 种 模式 。 
@ 指定 了 keyPath 且 autolncrement 为 true 时 
在 添加 数据 时 将 会 自动 对 所 指定 的 属性 添加 唯一 键 。 
@ 指定 了 keyPath 且 autolncrement 为 false 时 
在 添加 数据 时 ， 所 指定 的 属性 必须 具有 唯一 键 。 
@ 没有 指定 keyPath 且 autolncrement 为 true 时 


在 添加 数据 时 ， 将 会 自动 添加 唯一 键 。 该 键 不 被 包含 在 所 添加 的 数据 之 中 ， 而 是 另行 管理 。 


@ 没有 指定 keyPath 且 autolncrement 为 false 时 


在 添加 数据 时 必须 指定 唯一 键 。 该 键 不 被 包含 在 所 添加 的 数据 之 中 ， 而 是 


国 16.2.5 数据 的 添加 . 删除 引用 


另行 管理 。 


在 通过 键 对 数据 进行 添加 、 删 除 、 引 用 操作 时 ， 需 要 调用 各 个 对 象 存储 的 add (put )、delete， 及 get 
方法 。 所 有 的 方法 都 是 异步 执行 的 ， 返 回 值 是 一 个 请 求 对 象 ， 因 此 可 以 侦 听 这 些 对 象 的 success 事件 与 











error 事件 。 








代码 清单 16.15 是 一 个 实现 示例 ， 代 码 清单 16.16 是 一 个 运行 示例 。 详 旨 

















| 代码 清单 16.15 ”各 种 DB 操作 的 实现 示例 
// 对 开发 商 前 缀 提供 支持 


var IDBTransaction = window.IDBTransaction || window.webkitIdb 


// 用 于 数据 添加 的 包装 函数 
function addData(data) { 


// 事务 的 开始 



































说 明 请 参见 源 代码 中 的 注释 。 





Transaction; 


var transaction = db.transaction(['books'], IDBTransaction.READ WRITE); 
// 添加 数据 ( 也 可 以 用 put 来 替代 adaa ) 
var request = transaction.objectStore('books') .add (data); 
request .onsuccess = function(event) { 
// 如 果 成 功 ， 则 返回 键 

















VTaz key = event,.target.result; 
console.log('success! Key -=>', key); 


} 


// 用 于 数据 引用 的 包装 函数 

function getData(key) { 
// 事务 的 开始 
vareransace leon coransaet on oR 
// 数据 的 引用 


Var request = transaction.objectStore('books') .get (key); 
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redquest .onsuccess = function(event) { 
// 如 果 成 功 ， 则 返回 数据 
Var data = event.target.result; 
console.log('success! data ->', data); 














ba 
} 


// 用 于 数据 删除 的 包装 函数 
function deleteData(key) { 
// 事务 的 开始 
var transaction = db.transaction(['books'], IDBtransaction.READ WRITE); 


// 数据 的 删除 


Var request = transaction.objectStore('books') .delete (key); 








request.onsuccess = function(event) { 
console.log('success'); 
he 


} 
| 代码 清单 16.16 ”各 种 DB 操作 的 运行 示例 


js> addData({ isbn:'477413614X'，name:' 详解 C#' })); 





key -> 1 

js> addData({ isbn:'4774139904',，name:' 详解 Java' }); 
key -> 2 

js> addData({ isbn:'4774144371'，name:' 详解 PHP' }); 
key -> 3 

js> getData(3) 

data -> { 

la. Dy // 自动 添加 _ia 属性 








isbn:'4774144371, 
name: ' 详解 PHP， 


} 


js> deleteData (3) 
success 


js> getData (3) 
data -> undefined 


国 16.2.6 索引 的 创建 | 


我 们 可 以 通过 调用 createIndex 方法 来 创建 索引 ， 且 对 任意 的 属性 都 能 够 创建 索引 。 如 果 和 希望 对 多 个 
属性 创建 索引 ， 则 将 依照 属性 个 数 来 创建 索引 。 

此 外 ， 只 能 在 数据 库 的 版 本 更 改 事务 中 执行 索引 的 创建 操作 ， 对 此 请 加 以 注意 。 代 码 清单 16.17 是 
一 个 索引 创建 的 实现 示例 。 


上 代码 清单 16.17 索引 的 创建 
// DB 的 版 本 更 改 


var request = db.setVersion('1.1');，; 


























是 
































zequest .onsuccess = function(event) { 
var transaction = event.target.result; 
var store = transaction.objectStore('books'); 











// 创建 1sbn 属性 的 索引 


Var index = store.createIndex('isbnIindex', 'isbn'); 


ba 
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故 16.2.7 数据 的 检索 与 更 新 


























本 节 之 后 将 说 明 索 引 的 使 用 方法 。 通 过 使 用 索引 ， 就 能 够 对 创建 有 索引 的 属性 进行 高 速 的 指定 范 












































| 


的 检索 。 可 以 使 用 IDBkeyRange 来 指定 范围 。 表 16.2 对 IDBKeyRange 的 接口 进行 了 总 结 。 


表 16.2 IDBKeyRange 的 接口 一 览 
方法 说 明 


only(value) 创建 一 个 仅 含 有 value 的 范围 














lowerBound(value [, open]) 








value ) 


创建 一 个 以 value 为 下 限 的 范围 ( 如 果 open 被 指定 为 了 true， 则 该 范围 将 不 包含 











upperBound(value [, open]) 














value ) 


创建 一 个 以 value 为 上 限 的 范围 ( 如 果 open 被 指定 为 了 true， 则 该 范围 将 不 包含 

















bound(lowerupperLlowerOpen, upperOpen]) 





创建 一 个 以 lower 为 下 限 ， 以 upper 为 上 限 的 范围 

















( 可 以 通过 lowerOpen 与 upperOpen 分 别 来 指定 是 否 要 在 该 范围 中 包含 其 边界 值 ) 



































据 ， 




















我 们 可 以 通过 对 象 存储 的 index 方法 来 引用 已 有 的 索引 。 而 通过 openCursor 方 法 则 能 根据 索引 来 检 
索 数 据 。 如 果 将 openCursor 的 参数 指定 为 了 IDBkeyRange 对 象 ， 则 能 够 依次 检索 在 指定 范围 内 包含 的 数 














对 符合 条 件 的 数据 进行 引用 、 更 新 、 删 除 等 处 理 。 





在 成 功 对 数据 进行 了 检索 时 将 会 触发 success 事件 。 目 前 在 Firefox 中 
触发 success 事件 , 因此 有 必要 通过 证 语句 来 确认 cursor 是 否 存在 ”。 在 调 | 
续 检 索 下 一 个 数据 ， 如 果 数 据 的 检索 成 功 ， 则 将 再 次 触发 success 事件 。 



























































， 即 使 没有 数据 匹配 ， 也 将 会 

















] 了 cursorcontinue 之 后 将 会 继 





代码 清单 16.18 是 一 个 通过 索引 对 数据 进行 检索 与 更 新 处 理 的 实现 示例 。 详 细 的 说 明 请 参见 代码 内 
所 写 的 注释 。 


| 代码 清单 16.18 ”数据 的 检索 与 更 新 


























// 对 开发 商 前 缀 提供 支持 








var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction; 
var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange; 





// 对 事务 与 对 象 存储 的 准备 


var transaction = db.transaction(['books'], IDBTransaction.READ WRITE); 








var otore transactlonm opetetorel Pooksu 到 

// 创建 用 于 指定 范围 的 对 象 

var range = IDBKeyRange.bound('40000000000', 50000000007) 7 
// 通过 索引 检索 数据 

var request = store.index('isbnIindex') .openCursor (range); 
request.onsuccess = function(event) { 


// 获取 IDBCursor 对 象 


Var CUrsor = event.target.result; 


// 如 果 数 据 存在 
se (veerere) 
// 获取 数据 


var data = cursor.value; 


// 更 新 数据 

if (data.name === ' 详解 Java') { 
// 即使 没有 对 结构 描述 进行 定义 ， 也 能 够 对 数据 进行 扩展 
data.author = ' 井上 诚 一 郎 ， 永 井 雅 人 ， 松 山 智 大 ' ; 


cursor.update (data); 






































截至 翻译 本 书 时 仍 如 此 ， 且 今后 也 不 太 可 能 发 生变 化 。 关 于 可 能 的 标准 更 改 ， 请 留意 官方 文档 。 





译 者 注 
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// 删除 数据 


if (data.name === ' 讨 


cursor .aqelete() 


} 
// 检索 下 一 个 数据 


eursor continuel()e 
所 


国 16.2.8 数据 的 排序 


’ 


f 解 C#') { 








在 通过 索引 检索 数据 时 ， 可 以 指定 检索 顺序 
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取得 数据 。 如果 和 希望 指定 检索 顺序 ， 可 以 在 


openCursor 方法 的 第 2 个 参数 中 指定 遍历 顺序 。 可 以 作为 遍历 顺序 进行 指定 的 对 象 已 经 被 定义 为 了 








IDBCursor 中 的 常量 属性 。 表 16.3 总 结 





表 16.3 IDBCursor 的 常量 属性 一 览 ” 


了 IDBCursor 中 的 常量 





Fa 


FI O 
















































































NEXT 0 以 升序 方式 获取 ( 默认 值 ) 

以 升序 方式 获取 
NEXT-NO-DUPHCATE 1 ( 如 果 索 引 所 指定 的 属性 发 生 了 重复 ， 则 仅 读 取 第 一 个 数据 ) 
PREV 以 降序 方式 获取 

以 降序 方式 获取 
PREV-NO-DUPHICATE 3 ( 如 果 索 引 所 指定 的 属性 发 生 了 重复 ， 则 仅 读 取 第 一 个 数据 ) 
ENCODING_ERR 5 超过 了 DataURL 的 大 小 限制 








国 16.2.9 事务 





我 们 可 以 在 Indexed Database 中 使 用 





会 在 内 部 自动 地 创建 事务 。 








在 创建 了 事务 的 方法 已 经 结束 ， 或 姑 
交 之 前 就 发 生 了 错误 ， 则 将 自动 执行 


深 操 作 。 








Il 








F 始 了 新 的 ， 
回 滚 操 作 。 通 过 在 程序 


有 务 功 能 。 之 前 提 到 过 ， 在 进行 数据 库 的 版 本 更 改 等 处 理 





务 时 


| 由 
a 





该 


























淆 


P 调 





代码 清单 16.19 是 一 个 将 所 有 符合 检索 条 件 的 数据 全 部 机 
标 有 readonly 旗 标 的 数据 ， 则 将 取消 所 有 的 删除 处 理 。 


| 代码 清单 16.19 ” 回 滚 操作 的 实现 示例 


var request = index.openCursor (keyRange); 
request .onsuccess = function(event) { 
Var cursor = event.target.result; 


TREE 本 | 


// 如 果 标 有 readonly 旗 标 
if (cursor.value.readonly) { 
var transaction = event.target.transaction; 


滚 操作 


// 中 断 处 理 并 执行 








口 








Bransactuonsabone (es 


} else { 
// 数据 的 删除 
cursor.delete() 


// 检索 下 一 个 数据 


’ 


cursor.continue(); 





中 IDBCursor 的 常量 标准 。 























二 


十， 将 


和 务 将 被 自动 提交 。 而 如 果 在 事务 被 提 
事务 的 abort 方法 可 以 显 式 地 执行 回 





除 的 范例 。 不 过 ， 若 是 在 检索 结果 上 
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国 16.2.10 同步 API 


在 mdexed Database 的 标准 中 制订 了 一 些 用 于 对 各 种 数据 库 操作 进行 同步 处 理 的 API。 这 些 API 只 
在 Web Workers (参见 第 18 章 ) 的 环境 下 使 用 。 已 经 进行 了 说 明 的 那些 API 之 所 以 都 能 逐一 以 事件 驱动 
的 方式 进行 处 理 ， 是 因为 它们 没有 阻塞 用 户 的 UI 操作。 而 在 工作 线程 内 部 的 话 ， 即 使 要 同步 执行 复杂 的 
处 理 ， 也 不 用 担心 UI 会 假死 。 

可 惜 的 是 ， 在 执笔 本 书 时 还 没有 浏览 器 对 Indexed Database 的 同步 API 提供 支持 。 以 下 简单 的 范例 
代码 是 参考 了 W3C 的 标准 而 写成 的 ， 可 作为 参考 。 值 得 一 提 的 是 ， 与 事件 驱动 方式 的 代码 相 比 ， 其 实现 
相当 简单 (代码 清单 16.20 )。 

有 代码 清单 16.20 Indexed Database 的 同步 API 


// 连接 数据 库 
var db = indexedDBSync.open('testdb'); 








Pe 
CR 








上 






























































if (db.version |== 11.0") { 
// 版 本 的 设 定 
var transaction = db.setVersion('1.0'); 
// 对 象 存储 的 创建 
transaction.createObjectStore('books', { 
JE aol 
auLornerement Crue 


ys 








} 


// 数据 的 添加 
ver Eransaclion dp veransae tm oess nl unetron( 
Var store = transaction.objectStore('books'); 


store.add({ isbn:'4774139904'，name:' 详解 Java' })); 
他 IDBTYansactionSync.READ WRITE); 
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本 章 将 介绍 WebSocket。WebSocket 是 一 种 在 浏览 器 的 应 用 程序 中 实现 高 效 的 双向 通信 的 技 
术 。 在 很 长 时 间 内 ， 通 信 相 关 的 技术 都 没有 取得 显著 进展 ， 随 着 WebSocket 的 出 现 ， 开 发 更 
为 快速 、 简 单 的 Web 应 用 程序 成 为 可 能 。 


| 17.1 | WebSocket 概要 





国 17.1.1 WebSocket 的 定义 | 


WebSocket” 是 一 种 用 于 在 服务 器 与 客户 端 之 间 实 现 高 效 的 双向 通信 的 机 制 。 最 近 ， 在 Gmail 这 类 重 
视 数据 实时 性 的 Web 应 用 程序 中 常常 会 使 用 WebSocket， 这 种 技术 因此 广 受 瞩目 。 如 今 JavaScript 的 处 
理性 能 已 经 得 到 了 大 幅 改善 ，Web 应 用 程序 的 性 能 瓶颈 已 经 转移 到 了 网 络 通信 部 分 。WebSocket 被 认为 
是 一 种 能 够 实现 实时 Web 功能 的 关键 技术 ， 备 受 期 待 。 

WebSocket 的 API 组 成 非常 简单 。 通 过 WebSocket， 就 能 够 在 1 个 HTTP 连接 上 自由 地 双向 收发 消 
息 。 与 通过 结合 使 用 XMLHttpRequest 与 Server-sent Events 而 实现 的 双向 通信 相 比 ， 这 种 方式 具有 通信 
效率 更 高 、 设 计 与 实现 容易 等 优点 。 


国 17.1.2 现 有 的 通信 技术 | 
国 XMLHttpRequest 

在 XHR (XMLHttpRequest ) 出 现 之 后 ， 由 客户 端 发 往 服 务 器 方向 的 异步 通信 得 以 实现 。 准 确 地 说 ， 
在 更 早 之 前 我 们 就 能 够 通过 iframe 及 img 等 方式 来 强行 实现 异步 通信 了 ， 不 过 在 XMLHttpRequest 确立 
了 其 标准 的 通信 手段 的 地 位 之 后 ，Web 应 用 程序 的 异步 通信 和 领域 的 技术 才 得 到 了 飞跃 性 的 进步 。 

但 是 ，XHR 有 一 个 很 大 的 问题 ， 它 无 法 跨 源 通信 。 为 了 实现 跨 源 通信 而 出 现 了 JSONP 等 技巧 性 较 
强 的 方法 ， 且 至 今 仍 被 广泛 使 用 。 现 在 W3C 为 了 能 通过 一 种 规范 的 方式 来 解决 跨 源 通信 的 问题 ， 正 在 对 
XMLHttpRequest Level 22 的 标准 进行 讨论 “。 

XHR 技术 是 在 过 去 不 具备 状态 的 通信 技术 的 基础 上 设计 的 。 与 WebSocket 相 比 ， 在 通过 XHR 进行 通 
信 时 必须 添加 请 求 尖 部 ， 因 此 即使 只 发 送 1 个 字 节 的 信息 ， 也 需要 同时 发 出 数 KB 的 多 余 的 信息 。 在 诸如 
聊天 等 希望 每 输入 1 个 字符 便 向 服务 器 发 送信 息 时 ， 如 果 程 序 很 重视 其 实时 性 ， 就 可 能 因此 发 生性 能 下 降 。 
围 Server-Sent Events 

由 服务 器 发 往 客 户 端 方向 的 通信 ( 推送 通信 ) 领域 中 ， 在 很 长 一 段 时 间 内 都 没有 一 种 能 够 被 称 为 标 
准 技术 的 基本 技术 ， 因 此 ， 一 些 强行 使 用 了 大 量 技巧 性 较 强 的 手段 得 到 了 广泛 运用 。 如 今 ，W3C 为 了 能 
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http://dev.w3.org/html5/websockets/ 
http://www.w3.o0rg/TR/XMLHttpRequest2/ 
2011 年 底 ，XMLHttpRequestLevel2 已 经 并 入 XMLHttpRequest 标准 。 参 见 http://www.w3.org/TR/XMLHttpRequest/。 一 一 译 者 注 
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够 以 一 种 优雅 的 方式 来 实现 来 自 服务 器 的 推送 通信 ， 正 在 对 Server-Sent Events" 的 标准 进行 讨论 。 











Server-Sent Events 的 特点 是 ， 只 需 以 标准 所 指定 的 格式 从 服务 器 端 返回 通常 的 HTTP 响应 ， 就 能 够 
实现 推送 通知 的 功能 ， 因 此 可 以 直接 以 现 有 的 HTTP 服务 器 技术 来 设计 与 实现 。 同 时 ， 由 于 其 协议 也 非 






































常 简单 ， 标 准 也 已 经 确定 ， 因 此 能 够 放心 地 进行 使 用 。 














然而 ， 尽 管 现 在 的 市 场 对 推送 通信 已 经 有 了 巨大 的 需求 ， 却 还 是 有 很 多 的 浏览 器 没有 对 Server-Sent 









































Events 及 WebSocket 提供 支持 。 因 此 ， 本 节 将 介绍 一 些 广泛 用 于 过 时 浏览 器 的 替代 技术 。 
转 AJAX ( 轮 询 ) 





















































首先 可 以 考虑 使 用 轮 询 方式 ， 这 是 一 种 最 为 简单 的 用 以 实现 推送 通信 的 方法 。 所 谓 轮 询 ， 指 的 是 逐次 


向 服务 器 确认 是 否 有 发 送 请 求 的 方法 。 具 体 说 来 ， 它 以 AJAX 的 方式 从 客户 端 定期 地 向 服务 器 发 送 请 求 ， 





确认 服务 器 的 状态 ， 并 根据 服务 器 的 状态 ， 执 行 合 适 的 操作 。 代 码 清单 17.1 是 一 个 轮 询 的 实现 示例 。 


| 代码 清单 17.1 轮 询 的 实现 示例 
// 定期 确认 服务 器 的 状态 


setInterval (function() { 
Var xhr = new XMLHttpRequest (); 
xhr.onreadystatechange = function() { 
if (xhr.readyState == 4 && xhr.status == 200) { 
Var res = JSON.parse (xhr.responseText); 
// 如 果 有 更 新 ， 则 执行 操作 
if (res.serverStateCchanged) { 


) 7 进行 一 些 处 理 %*/ 





} 
所 
xhr.open('GET', 'http://www.foo.org/checkServerState'); 
xhr.send()，; 
ji OO 


























这 个 例子 使 用 了 setmterval， 并 通过 XMLHttpRequest 定期 确认 服务 器 的 更 新 。 这 是 一 种 标准 技术 ， 
































同时 用 于 客户 端 与 服务 器 端 ， 而 且 具 有 易于 实现 ， 运 行 稳定 的 优点 。 但 是 它 存 在 下 面 这 些 问 题 。 
@ 即使 服务 器 没有 更 新 ， 也 会 发 生 请 求 响应 ， 而 白白 增加 了 服务 器 与 客户 端的 负荷 。 





@ 即使 服务 器 进行 了 更 新 ， 如 果 客户 端 没有 发 来 请 求 ， 也 就 无 法 获知 这 一 情况 ， 因 而 更 新 通知 需要 额外 花费 


一 些 时 间 。 
国 Comet ( 长 轮 询 ) 


所 谓 的 Comet 是 一 种 总 称 ， 指 的 是 一 种 只 有 在 必要 时 才 从 服务 器 返回 响应 的 方式 。 可 以 通过 若 3 





F 种 方 


法 来 实现 Comet。 这 里 介绍 的 是 一 种 被 称 为 长 轮 询 的 方法 ， 它 可 以 在 轮 询 的 基础 上 进行 少许 更 改 之 后 实现 。 
对 于 通常 的 HTTP 通信 来 说 ， 在 收 到 了 客户 端 发 来 的 请 求 之 后 ， 服 务 器 就 会 立即 返回 响应 并 切断 连 
接 。 而 在 长 轮 询 中 ,在 客户 端 发 来 请 求 之 后 ， 服 务 器 将 会 保留 响应 ， 并 维持 连接 ， 因 此 可 以 在 任意 的 时 






























































间 点 从 服务 器 返回 响应 。 而 客户 端 在 收 到 了 响应 的 同时 ， 将 会 再 次 向 服务 器 建立 连接 。 
代码 清单 17.2 是 长 轮 询 的 实现 示例 。 
| 代码 清单 17.2 长 轮 询 的 实现 示例 


function connect () { 
Var xhr = new XMLHttpRequest (); 
xhr.onreadystatechange = function() { 











Tf (xhr readyState .==°4) 
// 来 自 服务 器 的 推送 通知 
Tt (xn acu 2200 





OD http://dev.w3.org/html5/eventsource/ 
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/* 进行 一 些 处 理 */ 


// ”再 次 连接 
connect () ; 

















} 
bs 


Xxhr.open('GET', 'http://www.foo.org/comet'); 
xhr.send(); 


} 

在 使 用 长 轮 询 时 ， 我 们 必须 事先 在 服务 器 端 进 行 设 定 ， 应 将 
轮 询 相 比 ， 长 轮 询 避 免 了 一 些 不 必要 的 通信 过 程 ， 但 也 需要 在 有 
国 Comet ( 流 ) 






































一 种 改进 了 长 轮 询 的 缺点 的 Comet 实现 方式 。 具 体 来 说 ， 
连接 ， 并 在 维持 该 链接 的 同时 从 服务 器 不 断 向 客户 端 返 回响 应 。 
态 ， 因 此 将 这 种 方式 称 为 流 。 











为 了 通过 流 来 实现 PUSH 通信 ， 就 必须 一 边 在 客户 端 接 收 响应 
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同时 连接 数 及 Keep-Alive 设 得 大 一 些 。 与 








更 新 时 再 次 连接 。 这 一 点 仍然 有 改进 余地 。 


丈 














通过 由 客户 端 发 出 的 第 一 个 请 求 ， 建 立 
由 于 服务 器 端 始 终 处 于 在 发 送 响应 的 状 











， 一 边 分 析 其 内 容 ， 并 进行 合适 的 处 








理 。 事 实 上 ，W3C 已 经 很 全 面 地 定义 了 Server-Sent Events 这 样 一 种 协议 ， 用 以 实现 这 种 处 理 方式 。 





在 此 ， 为 了 能 在 过 去 的 浏览 器 中 也 能 够 实现 流 处 理 ， 而 使 用 
我 们 来 介绍 这 种 使 用 了 这 ame 的 实现 示例 ( 代码 清单 17.3、 代 码 








有 代码 清单 17.3 流 的 实现 示例 ( 客户 端 页 面 ) 
<iframe id="iframe streaming" style="display:none;">< 


<script> 
function callback (res) { 


: /* 进行 一 些 处 理 */ 


funetlion eonnecel) 
// 通过 iframe 来 建立 连接 
var iframe = 
iframe.src = 'http://www.foo.org/comet'; 

















Er 


| 代码 清单 17.4 ， 流 的 实现 示例 ( 服务 器 响应 ) 


<script>window.parent .callback('DRAT 


A < /SenipDES 
<script>window.parent .callback ('DATA 2');</script> 











了 一 种 技巧 性 较 强 的 实现 手段 。 接 下 来 ， 
清单 17.4 )。 


/iframe> 


document .getElementById('iframe streaming'); 





接收 这 ame 后 将 会 以 通常 的 HTML 的 形式 分 析 服 务 器 的 响应 。 如 果 服 务 器 发 送 了 一 个 script 标签 ， 

















该 script 的 内 容 就 会 在 iframe 内 被 分 析 并 执行 。 只 要 源 相 同 ， 就 能 够 在 iframe 内 调用 父 
函数 ， 因 此 ， 就 能 在 任意 时 刻 在 服务 器 端 执行 客户 端 中 的 任意 函数 。 

这 种 实现 方式 的 缺点 在 于 ， 浏 览 器 对 iframe 的 实现 将 会 对 此 造成 很 大 的 影 
式 时 ，iframe 将 始终 处 于 读 取 状态 ， 而 不 会 完成 读 取 。 因 此 ， 根 据 浏览 



































] 父 页 面 的 JavaScript 


影响 。 比 如 ， 在 使 用 这 种 方 





览 絮 的 实现 方式 的 不 同 ， 可 能 会 在 





标签 中 始终 显示 正在 载 入 的 图 像 。 此 外 ， 如 果 不 断 地 发 送 响 应 ， 页 面体 积 将 会 不 断 增加 。 因 此 有 必要 在 


合适 的 时 机 刷新 过 ame。 
图 17.1 对 轮 询 、 长 轮 询 及 流 的 执行 方式 进行 了 比较 。 
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client 
server 





轮 询 






























































PUST 通信 技术 的 比较 
A client 重 A client 志 
让 server 器 server 刷 5 
请 求 请 求 
订 更 新 | 章 响 应 林 更 新 | 人员 应 本 更 新 
请 求 哆 应 六 更 新 
长 轮 询 流 








国 17.1.3 WebSocket 的 标准 


WebSocket 的 标准 现在 依然 处 于 制订 过 程 中 
JavaScript API 相关 的 标准 


API 标准 ， 





WebSocket 的 协议 标准 了 

















而 对 之 后 的 协议 标准 音 


， 以 及 与 服务 器 间 日 





























。WebSocket 的 标准 可 以 分 为 与 在 客户 端 使 用 的 


4 通信 相关 的 协议 标准 





部 分 ， 则 仅 会 对 一 些 必要 之 处 进行 说 明 。 





国 17.1.4 ”WebSocket 的 执行 方式 


在 通过 WebSocket 开始 双向 通信 时 ， 首 先 需 要 与 服务 央 建 
通过 HTTP 方式 发 送 的 。 服 务 器 端 将 会 确认 连接 对 象 的 源 以 及 协议 ， 
会 把 该 连接 升格 为 WebSocket。 这 一 连 串 的 流程 称 为 握手 。 
用 开发 者 的 角度 来 看 ， 在 完成 握手 并 建立 WebSocket 连接 的 过 程 中 ， 必 需 的 














， 
户 端 








送 了 响应 之 后 ， 浏 览 需 将 
从 客户 端 Web 应 














JavaScript 代码 仅 有 一 行 。 


var ws = new WebSocket ('ws://www.foo.org/bar', 


在 握手 通信 中 ， 我 们 通常 会 使 月 
协议 、 域 、 端 口 等 ， 则 都 是 在 握手 时 指定 
要 在 握手 时 ， 执 行 所 有 使 用 了 UserAgent 下 ie 来 进 和 

在 完成 了 握手 之 后 ， 就 建立 了 一 


























E 在 由 IETF 进行 制订 "。 在 2010 年 11 月 ， 
现 。 因 此 ，Firefox4 与 Operall 默认 禁用 了 对 WebSocket 的 支持 。 现 在 ， 正 计划 对 协议 标准 中 的 这 一 安全 
避 题 进行 处 理 。Firefox6 对 这 一 修改 后 的 标准 进行 了 实现 ， 从 这 一 版 本 起 ， 将 会 再 次 启 

如 果 要 在 Firefox4 及 5 中 使 用 WebSocket， 
面 中 ， 将 network.websocket.override-security-block 一 项 更 改 为 true。 同 样 地 ， 在 使 
需要 在 地 址 栏 中 输入 opera:config， 在 所 显示 的 设 定 页 面 中 ， 勾 选 Enable WebSocket 这 一 复 选 框 。 


则 需要 在 地 址 栏 








E 立 连接 。 而 用 














E。 本 章 将 主要 阐述 


前 者 ， 即 JavaScript 


一 个 协议 方面 的 重大 安全 隐患 被 发 























] WebSocket 。 


中 输入 about:config， 在 所 显示 的 设 定 页 
EE 用 Operall 的 情况 下 ， 
























































个 连接 ， 可 以 





日 GET 请求。 RR 
5 的 用 站 及 设备 认证 。 








自由 地 进 和 


EUopEoESS5I 有 
所 必需 的 协议 〔〈"ws: 或 "wss:] 和 子 
埋 中 添加 HITP 头 部 ， 因 此 ， 有 必 








了 消息 收发 。 





在 之 后 的 通信 过 程 中 ， 


于 建立 连接 的 请 求 ， 是 由 客 
发 送 连 接 许 可 的 响应 


。 在 发 





不 会 产 




















生 通 信和 所 不 需要 的 头 部 信息 的 收发 ， 也 不 需要 进行 客户 端的 认证 处 理 。 也 就 是 说 ，WebSocket 通信 是 含 
有 状态 的 ， 即 使 仅 收 到 了 1 个 字 节 的 数据 ， 也 能 够 确定 该 发 送 方 客户 端 。 
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http://tools.ietf.org/html/ draft-ietf-hybi-thewebsocketprotoco 
截至 翻译 本 书 时 ， 主 流 浏 览 器 中 对 WebSocket 提供 了 支持 的 有 以 下 这 些 : Internet Explorer 10〈 及 移动 版 )、Mozilla Firefox 


6 ( Firefox for Mobile 7 ) Google Chrome 4 ( 及 移动 版 )Safari 5 (及 iOS4.2 之 后 ) Opera 12.10 (及 移动 版 八 BlackBerry 7 ( 需 
要 设 定 )， 而 最 新 的 Android 4.2 的 内 置 浏览 器 尚未 对 WebSocket 提供 支持 。 一 一 译 者 注 
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| 17.2 | 基本 操作 
闻 17.2.1 连接 的 建立 | 





在 建立 连接 时 ， 我 们 首先 需要 在 客户 端 执行 对 WebSocket 类 的 构造 函数 调用 ， 以 创建 WebSocket 实 
例 。 构 造 函 数 调用 的 第 1 个 参数 所 指定 的 是 ， 将 要 进行 连接 的 WebSocket 服务 器 的 URL， 而 其 第 2 个 参 
数 则 需要 指定 子 协议 名 。 

Var ws = new WebSocket ('ws://www.foo.org:8888/bar', 'subprotocol'); 

WebSocket 可 以 选择 "ws:/" 或 "wss:/" 这 两 种 协议 。 如 果 将 协议 指定 为 wss， 就 能 够 以 TLS 对 通信 
加 密 。 如 果 没 有 指定 端口 ， 则 将 分 别 默认 使 用 80 和 443 端口 。 此 外 ,在 这 种 情况 下 ， 将 不 会 受到 同 源 策 
略 的 制约 。 如 有 必要 ， 则 可 以 在 WebSocket 服务 器 端 限制 连接 。 
第 2 个 参数 中 的 子 协议 名 是 可 以 省 略 的 。 反 过 来 ， 也 能 够 通过 数组 ， 来 指定 多 个 子 协议 名 。 如 果 指 
定 了 子 协议 ， 则 会 在 服务 器 端 选择 一 个 将 要 使 用 的 子 协议 并 返回 。 子 协议 是 应 用 层 的 协议 。 如 果 和 希望 应 
用 程序 能 够 根据 所 选择 的 子 协议 ， 来 切换 不 同 的 处 理 操 作 ， 可 以 使 用 这 种 方式 。 

在 进行 构造 函数 调用 之 后 ， 内 部 将 会 执行 握手 处 理 。 一 旦 建立 了 连接 ，WebSocket 实例 中 就 会 触发 
open 事件 ， 因 此 ， 需 要 像 代码 清单 17.5 这 样 ， 设 定 事件 处 理 程序 ， 并 实现 必要 的 处 理 操 作 。 例 如 ， 在 启 
用 发 送 按钮 ， 或 向 服务 器 请 求 初 始 数据 时 ， 可 以 将 其 作为 触发 需 来 使 用 。 
| 代码 清单 17.5 ”连接 建立 时 的 事件 处 理 程序 


ws.onopen = function(event) { 


入 六 行 一 此 处 理 */ 


国 17.2.2 消息 的 收发 | 


在 建立 了 连接 之 后 ， 就 可 以 进行 消息 收发 了 。 如 果 要 将 消息 发 送 至 服务 器 ， 则 需要 将 希望 发 送 的 数 
据 传递 至 send 方法 的 参数 。 如 果 要 从 服务 器 接收 消息 ， 则 可 以 通过 message 事件 对 其 进行 捕捉 。 由 服务 
器 发 送 的 数据 会 保存 于 message 事件 对 象 的 data 属性 之 中 。 代 码 清 单 17.6 是 一 个 例子 。 
外 代码 清单 17.6 消息 的 收发 

// 向 服务 器 发 送 消息 

ws.send('Hello, WebSocket!'); 


// 接收 服务 器 发 送 的 消息 
ws .onmessage = function(event) { 
// 取出 所 受到 的 数据 


var receivedMessage = event.data; 








































































































































































































, /* 进行 一 些 处 理 */ 


在 执笔 本 书 时 ， 根 据 WebSocket 的 标准 ， 只 能 收发 一 部 分 的 JavaScript 对 象 。 不 过 ， 由 于 可 以 收发 
任意 的 字符 串 ， 因 此 可 以 像 代码 清单 17.7 这 样 ， 通 过 JSON.parse 与 JSON.stringify 方法 ， 简 单 地 实现 对 
JavaScript 对 象 的 处 理 。 
有 代码 清单 17.7 收发 任意 的 JavaScript 对 旬 


ee olod = ee va} 
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// 将 JavaSscript 对 象 转换 为 JSON 字符 串 并 发 














ws.send (JSON.stringify (obj)); 


ws.onmessage = function (event) 


// 将 接收 到 的 JsoON 字符 








{ 


送 


转换 为 avaScript 对 象 


var receivedObject = JSON.parse(event.data); 


Vr 


hs 


闻 17.2.3 连接 的 切断 








可 以 通过 在 客户 端 调用 close 方法 ， 来 显 式 地 切断 连接 。 一 旦 连接 被 切断 ， 就 会 触发 close 事件 ， 因 此 
E 程 序 ， 并 实现 连接 关闭 后 所 必要 的 处 理 操 作 。 代 码 清单 17.8 是 一 个 例子 。 














需要 设 定 事件 处 至 








| 代码 清单 17.8 ”连接 的 切断 


// 切断 连接 


ws.close(); 


ws.onclose = function(event) { 


Vw* 闵行 一 些 处 理 x/ 


ba 


不 过 ， 在 通常 的 WebSocket 应 用 


























| 代码 清单 17.9 ”再 次 建立 连接 
// 用 于 保存 WebSsocket 实例 的 变量 


Var Wa EU 


’ 


// Websocket 的 初始 化 

function initWebSocket() { 
ws = new WebSocket ('ws://www.foo.org/bar'); 
ws.onopen = function(){ /* 进行 一 些 处 理 */ }); 


ws .onmessage 





了 人 件 ， 并 尝试 再 次 连接 的 示例 。 在 这 一 示例 中 ， 为 了 避免 产生 大 量 
连接 的 时 间 间 隅 。 








开发 中 ， 很 少 要 在 客户 端 切 断 连接 。 反 而 在 客户 端 从 长 时 间 的 休眠 
状态 中 恢复 时 ,或 者 在 WebSocket 服务 器 重启 时 ， 和 常常 会 出 现 连接 被 意外 切断 的 情况 。 

为 了 应 对 这 种 情况 ， 应 当 在 客户 端 实 现 能 够 
代码 清单 17.9 中 是 一 个 捕捉 了 close 习 
空 循环 ， 而 使 用 setTimeout 来 调整 重 前 




















自动 尝试 重新 连接 的 功能 。 这 种 方式 是 更 为 用 户 友好 的 。 

















= function(){ /* 进行 一 些 处 理 */ }; 











// 在 连接 被 切断 10 秒 后 尝试 再 次 连接 
function(){ setTimeout (initWebSocket, 10000); }; 


ws.onclose = 


} 


故 17.2.4 连接 的 状态 确认 














可 以 通过 引用 

















在 WebSocket 类 


WebSocket 实例 的 readyState 





属性 ， 来 确认 连接 的 状态 。readyState 所 能 取得 的 值 ， 是 





被 定义 的 常量 属性 。 表 17.1 总 结 了 readyState 所 能 获取 的 连接 状态 。 


表 17.1 WebSocket 类 的 常量 属性 一 览 






































说 明 
CONNECTING 0 正在 连接 
OPEN 1 已 处 于 连接 中 
CLOSING 区 正在 切断 连接 
CLOSED 3 已 经 切断 或 连接 失败 
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故 17.2.5 ”二进制 数据 的 收发 





WebSocket 所 能 够 收发 的 格式 有 字符 串 、Blob， 以 及 ArrayBuffer 这 三 种 。Blob 与 ArrayBuffer 是 用 于 








293 @ 




















通过 JavaScript, 来 对 二 进 制 数据 进行 处 理 的 格式 “。 如 果 要 在 WebSocket 中 发 送 二 进 制 数据 , 只 需要 直接 六 
Blob 或 ArrayBuffer 直接 指定 给 send 方法 即 可 。 代 码 清单 17.10 是 一 个 二 进 制 数据 的 发 送 方法 的 示例 。 








上 代码 清单 17.10 二 进 制 数据 的 发 送 


// 指定 Blob 并 发 送 
ws.send (blog) ; 























// 指定 ArrayBuffer 并 发 送 
ws.send(arrayBuffer).; 














二 进 制 数据 的 接收 方法 与 通常 的 文本 数据 的 接收 方法 基本 一 致 。 为 了 选择 以 Blob 还 是 ArrayBuffer 
格式 来 接收 ， 我 们 需要 将 binaryType 属性 指定 为 字符 串 "blob" 或 "arraybuffer'。 默 认 情 况 下 的 设 定 值 为 
































"blob"。 代 码 清单 17.11 是 一 个 二 进 制 数据 的 接收 方法 的 示例 。 
上 代码 清单 17.11 二 进 制 数据 的 接收 


// 指定 接收 二 进 制 数据 的 格式 
ws.binaryType = 'blob'; 














ws.onmessage = function(event) { 
Var receivedData = event .data; 
if (receivedData.constructor === Blob) { 


// 接收 二 进 制 数据 














} else if (receivedData.constructor === String) { 


| // 接收 文本 数据 
和 


国 17.2.6 ”WebSocket 实例 的 属性 一 览 























表 17.2 总 结 了 WebSocket 类 的 实例 所 具有 的 属性 ， 根 据 浏 览 器 的 种 类 及 版 本 的 不 同 ， 


























未 实现 ， 请 酌情 通过 用 于 开发 的 控制 台 等 方式 ， 确 认 是 和 否 进 行 了 实现 。 
表 17.2 WebSocket 实例 的 属性 一 览 
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三 








屋 ,| ~ 





































































































属性 名 说 明 

URL 连接 目标 的 URL 

protocol 所 选择 的 子 协议 名 

readyState 连接 状态 。 关 于 可 以 通过 该 属性 获取 的 值 ， 请 参见 17.2.4 一 节 

bufferAmount 在 send 方法 中 ， 注 册 为 发 送 队 列 的 字符 串 的 ， 尚 未 发 送 部 分 的 缓冲 大 小 ( 单位 为 字 节 ) 
onopen 在 连接 建立 时 所 执行 的 事件 处 理 程序 

onclose 在 连接 被 切断 时 所 执行 的 事件 处 理 程序 

onerror 在 出 错时 所 执行 的 事件 处 理 程序 

onmessage 在 从 服务 器 收 到 消息 时 所 执行 的 事件 处 理 程序 

binaryType 间 定 了 二 进 制 数据 的 接收 格式 ( 'blob' 或 arrayBuffer ) 

send(data) 于 向 服务 器 发 送 消息 的 方法 ( data 可 以 被 指定 为 String、Blob 及 ArrayBuffer 中 的 一 种 ) 
closel) 于 切断 与 服务 器 的 连接 的 方法 






































中 不 过 ， 在 执笔 本 书 时 ， 还 没有 浏览 器 对 二 进 制 数据 的 收发 进行 实现 。 
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| 17.3 | WebSocket 实践 


接 下 来 ， 我 们 将 实际 地 创建 一 个 聊天 应 用 程序 ， 并 在 此 过 程 中 确认 WebSocket 的 使 用 方法 。 聊 天 程 
序 是 WebSocket 的 范例 中 最 为 典型 的 一 种 。 其 处 理 较 为 单一 ， 理 解 起 来 也 比较 容易 ， 而 且 还 能 够 轻松 地 
进行 自 定义 扩展 ， 是 一 种 非常 合适 的 入 门 主题 。 


冯 17.3.1 ”Nodejjs 的 安装 | 


WebSocket 无 法 像 其 他 API 那 样 ， 仅 通过 客户 端的 实现 就 能 确认 其 运行 情况 。 还 必须 在 服务 器 端 执 
行 大 量 的 功能 实现 。 可 以 使 用 任何 语言 来 对 服务 器 端 进行 实现 。 大 部 分 主流 的 语言 ， 都 已 经 发 布 了 用 于 
WebSocket 服务 器 实现 的 库 。 

在 这 个 教程 中 , 我 们 将 始终 Nodejs"， 而 在 服务 器 端 则 会 使 用 JavaScript 来 进行 实现 。Nodejs 运行 于 
开源 的 高 速 JavaScript 引擎 V8 之 上 ， 是 一 种 目前 发 展 势头 良好 的 服务 器 端 JavaScript 实现 。 本 书 第 6 部 
分 将 会 对 其 进行 详细 说 明 ， 因 此 现在 只 简单 地 作为 参考 即 可 。 

首先 需要 安装 Node.js。Node.js 现在 仍然 处 于 活跃 开发 状态 ， 会 频繁 地 进行 版 本 升级 。 因 此 , 已 经 发 
布 了 多 个 用 于 管理 Node.js 主体 版 本 的 工具 。 在 这 里 使 用 的 Nodejjs 版 本 管理 工具 是 nave， 接 下 来 ,我 们 
来 介绍 使 用 nave 进行 安装 的 方法 (图 17.2 )。 


17.2 NodeJjs 主体 的 安装 


Co bie ool ol ee/ halond lo ore Yall Yoh Ne 
$$ ~/.nave/nave.sh ls-remote 

TemeEe 
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~/.nave/nave.sh install 0.4.8 
~/.nave/nave.sh use 0.4.8 
echo "~/.nave/nave.sh use 0.4.8">> ~/.bashrc 


在 安装 了 Node.js 的 主体 之 后 ， 接 下 来 要 安装 的 是 npm (图 17.3 )。npm 是 Node.js 使 用 的 包 管 理 需 。 
通过 npm， 就 能 很 容易 地 安装 适用 于 Node.js 的 库 。 这 次 将 会 安装 的 是 websocket-server， 它 是 一 种 用 于 
实现 WebSocket 服务 器 的 库 。 应 当 在 开发 文件 夹 内 执行 npm install 指令 ， 这 是 因为 该 库 将 会 被 部 署 于 执 
行 了 npm 指令 的 文件 夹 中 。 


图 17.3 npm 与 websocket-server 的 安装 


No oo 









































% curl http://npmjs.org/install.sh | sh 


$$ npm install websocket-server 
websocket-server@1.4.04 ./node modules/websocket-server 


如 果 是 在 Windows 中 尝试 安装 ， 请 使 用 Cygwin 或 通过 VirtualBox 使 用 Ubuntu 等 系统 来 完成 操作 。 



































而 如 果 Node.js 是 0.5.1 或 更 新 版 本 ， 则 可 以 在 Windows 中 使 用 "node.exe" 来 方便 地 执行 Nodejs 程序 。 
其 官方 网 站 已 经 发 布 了 这 一 工具 ， 不 过 在 使 用 node.exe 时 ，npm 之 类 的 工具 还 是 无 法 使 用 ， 需 要 以 手动 


























D http://nodejs.org 
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的 方式 来 安装 包 。 
故 17.3.2 服务 器 端的 实现 | 


在 开始 进行 实现 之 前 ， 我 们 先 要 对 一 些 常 见 的 WebSocket 应 用 程序 的 模式 进行 说 明 。WebSocket 服 
务 器 在 收 到 消息 之 后 ， 将 会 进行 一 些 处 理 ， 并 将 消息 返回 至 连接 目标 。 这 时 ,通常 的 WebSocket 应 用 程 
序 的 返回 目标 ， 大 致 可 以 分 为 以 下 3 种 模式 。 

@ 将 数据 返回 给 消息 的 发 送 者 。“@ 向 所 有 人 广播 该 消息 。 e@ 仅 将 消息 广播 给 符合 条 件 的 人 

对 于 聊天 程序 来 说 ， 只 要 向 所 有 处 于 连接 状态 的 人 广播 消息 ， 就 能 够 实现 最 低 程 度 的 功能 。 如 果 还 
希望 在 此 增加 聊天 室 等 功能 ， 则 需要 对 相应 的 广播 处 理 进行 实现 ， 将 发 言 内 容 的 可 见 性 限制 在 聊天 室内 
的 人 之 间 。 

这 里 实现 的 WebSocket 服务 器 ， 将 会 把 所 接收 到 的 消息 广播 至 所 有 处 于 连接 中 的 人 。 这 实在 是 一 种 
很 常见 的 功能 ， 椒 怕 在 大 多 数 的 库 中 ， 都 已 经 准备 了 能 够 实现 这 一 功能 的 方法 了 。Nodejs 的 websocket- 
server 自然 也 准备 了 相应 的 方法 。 代 码 清单 17.12 是 一 个 实现 示例 ， 请 以 任意 的 名 称 ， 将 其 保存 于 安装 了 
websocket-server 的 文件 夹 中 。 这 里 使 用 的 是 chat.js。 


| 代码 清单 17.12 ”WebSocket 服务 器 的 实现 示例 ( chatjs ) 


// 使 用 websocket-server 
Var ws = require('websocket-server'); 


// 创建 Websocket 服务 器 


Var server = ws.createServer(); 


// 捕捉 连接 事件 


server.addListener('connection', function(socket) { 
a 



























































































































































// 显示 上 日志 

console.1og('onconnecion:'，Ssocket) ; 

// 捕捉 消息 的 接收 事件 

socket .addListener('message', function(data) { 
// 将 所 接收 的 消息 直接 广播 给 所 有 处 于 连接 中 的 人 














server.broadcast (data); 
bo 
De 


// 在 8888 号 端口 处 理 访问 
server.listen(8888); 
Gonsole log( I walitinge 


几乎 上 面 的 每 一 行 都 添加 了 注释 ， 不 过 其 实 这 是 一 段 只 有 10 行 左右 的 代码 。 通 过 它 就 能 够 实现 一 个 简 
单 的 WebSocket 服务 器 了 。 为 了 启动 服务 器 ， 还 需要 执行 以 下 指令 。 至 此 ， 服 务 器 端的 实现 就 全 部 完成 了 。 


$$ node chat.js 
want noe 

































































故 17.3.3 客户 端的 实现 | 


代码 清单 17.13 是 一 个 客户 端的 实现 示例 。 这 里 所 实现 的 处 理 大 致 上 可 以 分 为 ， 将 文本 框 中 的 字 
符 串 发 送 给 服务 器 的 处 理 ， 以 及 显示 从 服务 器 收 到 的 数据 的 处 理 。 可 以 在 WebSocket 构造 函数 中 指定 
WebSocket 服务 器 的 URL。 如 果 是 在 本 地 运行 Nodejs， 则 会 使 用 本 例 中 这 样 的 URL。 

还 需要 以 任意 的 名 称 保存 文件 ， 并 将 其 配置 为 WebSocket 服务 器 所 能 引用 的 路 径 。 这 里 所 使 用 的 是 
chat.html。 说 一 句 题 外 话 ， 在 HTML5 中 ，html 标签 及 body 标签 可 以 省 略 。 因 此 ， 即 使 是 代码 清单 17.13 
中 的 代码 ， 也 能 够 被 作为 HTML5 标记 语言 来 正确 地 进行 解释 。 
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| 代码 清单 17.13 ”聊天 客户 端的 实现 示例 ( chat.html ) 


<1DOCTYPE html> 

<title>simple chat client</title> 

<!-- 通过 回 车 键 发 送 文本 --> 

<input onkeydown="if (event .keyCode===13) submit (this)"> 
ES 

var ws = new WebSocket ('ws://localhost:8888/'); 


// 将 接收 的 消息 插入 body 内 

ws.onmessage = function(event) { 
Var comment = document .createElement ('1i'); 
comment .textContent = event.data; 
document .body.appendChild (comment); 














De 
// 将 文本 框 的 值 发 送 给 服务 器 


function submit (textbox) { 
ws.send (textbox.value); 
textbox.value = 177 


ele 


之 后 请 同时 在 多 个 标签 页 中 打开 chat.html。 如 果 连 接 成 功 ， 启 动 了 WebSocket 服务 器 的 终端 应 该 会 
输出 日 志 。 在 文本 框 中 输入 消息 并 按 下 回 车 键 之 后 ， 消 息 将 通过 WebSocket 服务 器 广播 ， 所 有 打开 着 的 
页 面 都 将 会 显示 该 消息 (图 17.4 )。 


| 图 17.4 ”简单 的 聊天 应 用 程序 
































AQAAn simple chat client 
| 口 simple chat client aNn simple chat client 
(QD rv|C| (SH co0oQ) 此 











你 好 








你 好 你 好 
那么 再 见 你 好 

















那么 





























国 17.3.4 客户 端的 实现 2 | 


尽管 本 章 将 上 面 的 程序 称 为 一 个 范例 ， 不 过 它 并 没有 什么 实际 意义 。 因 此 ， 接 下 来 将 会 尝试 在 聊天 
中 添加 用 户 名 ， 以 及 能 够 自由 设 定 评论 样式 的 功能 。 此 外 ， 还 会 试 着 添加 一 些 功 能 ， 使 聊天 对 象 的 输入 
状态 得 以 可 视 化 。 

这 次 修改 不 会 对 服务 器 端的 代码 作 任 何 更 改 。 接 下 来 ， 将 会 对 之 前 的 范例 分 别 添加 两 条 届 辑 ， 其 一 是 用 
于 在 客户 端 构造 所 要 发 送 的 JSON 的 逻辑 ， 男 一 个 则 是 用 于 绘制 所 广播 的 JSON 的 逻辑 ( 代码 清单 17.14 )。 


| 代码 清单 17.14 “聊天 客户 端的 实现 示例 ( chat2.html ) 


<!DOCTYPE html> 

<title>simple chat client</title> 
< Ser 

=npeue ed es 

<nouC rd te 

ell ele en ly 

















<Serioes 


图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 


第 17 章 WebSocket 


Var ws = new WebSocket ('ws://localhost:8888/'), 
$ = function(id){ return document .getElementById(id); }; 
$('text') .onkeydown = function(event) { 
// 通过 回 车 键 以 向 服务 器 发 送 发 言 
if (event.keyCode === 13) { 
ws.send (JSON.stringify({ 
action Tose. 
user: $('user') .value, 
css: $('css') .value, 
text: $('text') .value 
把 马达 


SIEGXEORValeE 0, 


// 向 服务 器 发 送 正在 输入 这 一 状态 
} else { 

ws.send (JSON.stringify({ action:'typing', user:$('user') .value })); 
} 














} 


ws.onmessage 
var data 


// 根据 action 属性 来 切换 相应 的 处 理 
switch(data.action) 
case Dost // 绘制 发 言 
Var comment = dqocument .createElement ('1i'); 
Comment Style.cssText = data.css; 
Comment .textContent = data.user + ': ' + data.text; 
document .body.appendChild (comment); 
break; 


function(event) { 
JSON.parse (event .data); 








case 'typing': // 绘 第 
(tym EersteonenEe 
clearTimeout (timer); 


正在 输入 的 状态 
= data.user + ' 先生 /小 姐 正在 输入 …… 1 





timer = setTimeout (function(){ S$(IEyping') .textContent = ''; }, 3000); 


break; 


} 
}8 


/Ser 
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虽然 增加 的 功能 很 简单 ， 但 在 增加 功能 的 过 程 中 ， 的 确 没有 在 服务 顺 端 新 增 任何 的 逻辑 (网 17.5 )。 
在 WebSocket 应 用 程序 中 ， 只 要 有 一 个 这 样 的 具备 有 广播 功能 的 服务 器 ， 并 且 在 客户 端 实现 了 JSON 构 
























































造 及 绘制 的 逻辑 的 话 ， 就 能 够 只 通过 客户 端的 代码 来 实现 各 种 各 样 的 创意 。 

















例如 ， 只 要 在 广播 的 消息 中 添加 信息 并 将 其 返回 ， 就 连 类 似 于 “ 赞 ”按钮 或 问卷 之 类 的 功能 也 角 
这 样 的 实时 消息 收发 来 说 ， 在 服务 器 端 连 数据 库 都 不 必 准 备 。 











现 。 而 这 仅 需要 修改 客户 端 即 可 。 特 别 是 对 于 








被 实 





当然 ， 在 实际 发 布 服务 时 ， 在 服务 器 端 也 有 很 多 应 当 考 虑 之 处 。 不 过 作为 WebSocket 应 用 程序 开发 





的 练习 课题 来 说 ， 这 样 的 实时 消息 收发 程序 已 经 足够 了 ， 强 烈 推荐 大 家 试 一 下 。 
| 17.5 ”聊天 应 用 程序 的 功能 增强 





是 日 日 simple chat client 


上 
1 0 simple chat client a@NA simple chat client 




























考 素 人 color:red; font=: 
























滨 边 ; 你 好 CS on 

将 太 : 你 好 滨 边 : 你 好 

滨 边 ; 那么 再 见 将 太 : 你 好 
滨 边 : 那么 再 见 


























x 














图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 


@ 298 一 一 一 第 4 部 分 HTML5 








Web Workers 


本 章 将 会 说 明 Web Workers。 单 线程 是 JavaScript 中 习以为常 的 规范 了 ， 而 Web Workers 则 
将 多 线程 的 概念 引入 了 JavaScript。 随 着 Web Workers 的 引入 ， 很 多 在 此 之 前 被 认为 难以 在 
客户 端 实现 的 问题 ， 将 可 能 得 以 解决 。 


18.1 | Web Workers 概要 


加 | 18.1.1 Web Workers 的 定义 | 


从 内 部 来 看 ， 客 户 端 JavaScript 与 UI 的 泻 染 处 理 用 的 是 同一 个 进程 ， 而 且 是 以 单线 程 的 方式 执行 的 。 
因此 ， 如 果 在 客户 端 JavaScript 中 执行 高 负载 的 处 理 ， 就 可 能 会 发 生 UI 泻 染 处 理 被 阻 断 这 一 致命 问题 。 

Web Workers" 是 一 种 能 够 在 另外 的 线程 中 创建 新 的 JavaScript 运行 环境 ， 以 使 JavaScript 代码 能 够 
在 后 台 处 理 的 一 种 机 制 。 如 果 能 够 视 情 况 恰当 地 分 离 出 复杂 的 处 理 ， 并 将 其 置 于 后 台 运 行 ， 就 能 够 在 
通过 客户 端 进行 复杂 处 理 的 同时 ， 不 妨碍 用 户 的 UI 操作， 从 而 开发 出 高 可 用 性 的 Web 应 用 程序 。 

此 外 ， 本 书 已 经 介绍 过 的 File API ( 15.2 节 ) 和 Indexed Database ( 16.2 节 ) 等 IO 处 理 API 中 ， 都 
已 经 提供 了 不 会 阻 断 UI 的 事件 驱动 API。 不 过 ，Web Workers 的 运行 环境 是 与 UI 处 理 线程 相 分 离 的 ， 而 
不 用 担心 将 会 阻 断 UI， 因 此 ， 它 们 同时 也 提供 了 一 些 仅 能 够 运行 于 Web Workers 环境 的 简单 的 同步 IO 
处 理 API。 关 于 同步 API， 在 各 章 都 有 所 简单 介绍 ， 请 分 别 参考 相关 章节 。 


加 | 18.1.2 ”Web Workers 的 执行 方式 


首先 ， 我 们 对 一 些 术语 进行 定义 。 本 书 将 通常 的 客户 端 JavaScript 运行 环境 称 作 主 线程 ， 而 将 通 i 
Web Workers 创建 的 后 台 JavaScript 运行 环境 称 为 工作 线程 (Worker )。 可 以 在 主线 程 中 创建 工作 线程 ， 
且 能 够 同时 创建 多 个 工作 线程 。 

主线 程 与 工作 线程 的 JavaScript 运行 环境 是 相互 分 离 的 ， 无 法 相互 引用 对 方 环境 中 的 变量 。 也 就 是 
说 ， 在 各 自 的 环境 中 分 别 准 备 了 其 全 局 对 象 ， 且 这 些 全 局 对 象 无 法 被 相互 引用 。 可 以 通过 window 这 一 
名 称 来 引用 主线 程 的 全 局 对 象 ， 并 通过 self 这 一 名 称 来 引用 工作 线程 的 全 局 对 象 。 

还 有 一 个 重要 的 问题 是 ， 从 工作 线程 的 环境 中 是 无 法 引用 document 对 象 的 。 也 就 是 说 ， 所 有 的 UI 
操作 ， 即 DOM 的 引用 与 更 改 ， 都 只 能 在 主线 程 中 进行 。 无 法 在 工作 线程 中 对 UI 进行 任何 操作 。 如 果 要 
进行 数据 的 收发 处 理 ， 则 必须 通过 消息 收发 接口 (postMessage 方法 、message 事件 ) 来 进行 。 

这 些 都 是 为 了 简化 多 线程 程序 设计 而 添加 的 限制 。 在 语言 规范 层面 上 保证 了 UI 操作 始终 都 只 能 在 3 
线程 中 执行 的 话 ， 就 能 够 将 一 些 在 多 线程 程序 设计 中 多 发 的 错误 防范 于 未 然 。 图 18.1 展示 了 主线 程 与 工 
作 线 程 的 关系 。 
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D http://dev.w3.org/html5/workers 
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上 图 18.1 主线 程 、 工 作 线程 与 DOM 的 关系 图 

5 ”DOM 事件 E 

= oNnmessage 

= onmessage 

. DOM 操作 

[= 

18.2 | 基本 操作 

闻 18.2.1 工作 线程 的 创建 l 








工作 线程 的 创建 是 非常 简单 的 。 可 以 通过 在 主线 程 中 调用 Worker 构造 函数 来 创建 工作 线程 。 
Var worker = new Worker('worker.js'); 


对 于 希望 在 工作 线程 中 执行 的 JavaScript 代码 ， 只 要 将 写 有 该 代码 的 文件 的 URL 指定 为 构造 函数 的 
参数 ， 就 能 够 使 其 在 后 台 运 行 。 在 上 面 的 示例 中 ， 当 前 文件 夹 中 的 workerjs 将 被 下 载 ， 而 写 于 workerjs 
中 的 代码 则 会 在 后 台 执 行 。 

对 于 在 Worker 的 构造 函数 中 所 指定 的 文件 ， 也 有 同 源 策略 的 限制 。 因 此 ， 主 线程 只 能 够 读 取 与 其 同 
源 的 文件 ， 对 此 请 加 以 注意 。 


国 18.2.2 主线 程 一 侧 的 消息 收发 | 


可 以 通过 调用 Worker 实例 的 postMessage 方法 ,来 从 主线 程 向 工作 线程 发 送 消 息 。postMessage 所 能 
发 送 的 数据 类 型 是 很 自由 的 ， 任意 的 JavaScript 对 象 都 能 够 被 发 送 。 不 过 ， 包 括 document 对 象 等 一 些 特 
殊 的 对 象 ， 是 无 法 被 发 送 的 。 

可 以 通过 捕捉 Worker 实例 的 message 事件 ， 以 接收 来 自 工作 线程 的 消息 。 而 工作 线程 实际 发 送 的 数 
据 本 身 ， 是 被 保存 于 message 事件 对 象 的 data 属性 之 中 的 。 代 码 清单 18.1 是 一 个 例子 。 


| 代码 清单 18.1 ”主线 程 一 侧 的 消息 收发 
// 消息 的 发 送 


worker.postMessage ('foo'); 
worker.postMessage (100) ; 
worker.postMessage ({ x:1, y:2 }); 


// 消息 的 接收 
worker.onmessage = function(event) { 
// 获取 所 发 送 的 数据 


var receivedMessage = event.data; 


/* 进行 一 些 处 理 */ 
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国 18.2.3 工作 线程 一 侧 的 消息 收发 











我 们 可 以 通过 调用 在 工作 线程 中 所 定义 的 postMessage 方法 ,来 从 工作 线程 向 主线 程 发送 消 息 。 此 
时 ， 和 之 前 一 样 ， 任 意 的 JavaScript 对 象 都 能 够 被 发 送 。 

我 们 可 以 通过 捕捉 全 局 对 象 的 message 事件 ， 来 接收 发 送 自主 线程 的 消息 。 而 主线 程 实际 发 送 的 数 
据 本 身 ， 是 被 保存 于 message 事件 对 象 的 data 属性 之 中 的 。 代 码 清单 18.2 是 一 个 例子 。 






































上 代码 清 单 18.2 工作 线程 一 侧 的 消息 收发 
// 消息 的 发 送 


self.postMessage('foo'); 
self.postMessage (100); 
self.postMessage({ x:1, y:2 }); 


// 消息 的 接收 
self.onmessage = function(event) { 
// 获取 所 发 送 的 数据 


var receivedMessage = event .data; 














/* 进行 一 些 处 理 */ 














此 时 消息 收发 的 接口 与 在 主线 程 中 的 情况 几乎 相同 。 在 这 里 ， 工 作 线程 内 的 sef 都 可 以 省 略 ， 但 为 


了 更 容易 地 区 分 调用 方 是 主线 程 还 是 工人 线程， 本: 
国 18.2.4 工作 线程 的 删除 





并 不 会 省 略 它们 ， 而 是 会 一 一 写 明 。 











即使 是 小 型 的 程序 ， 工 作 线程 也 会 占用 一 定 程 度 的 内 存 ， 因 此 ， 最 好 删除 不 必要 的 工作 线程 。 对 于 























Chrome 来 说 ， 可 以 在 选项 菜单 中 的 工具 列表 中 启动 任务 管理 器 ， 通 过 它 来 确定 工作 线程 的 内 存 及 CPU 











占用 状态 (图 18.2 )。 
上 图 18.2 Chrome 的 任务 管理 器 状况 显示 

















ge 一 一 一 一 一 一 “| Memory CPU Network | FPS 
Web Worker: localhost 12.5 MB 0.0 N/A N/A 
Web Worker: localhost 13.1 MB 0.0 NIA N/A 
Web Worker: localhost 12.9MB 0.0 N/A N/A 
Web Worker: localhost 12.3 MB 0.0 N/A N/A 
Web Worker: localhost 12.3 MB 0.0 NIA N/A 
Web Worker: localhost 12.9 MB 0.0 N/A N/A 
Web Worker: localhost 12.2 MB 0.0 N/A N/A 
Web Worker: localhost 12.1 MB 0.0 N/A N/A 
Web Worker: localhost 13.1MB 0.0 N/A N/AX 
Web Worker: localhost 13.1 MB 0.0 NIA N/A, 

Stats for nerds End process 

4 









































有 两 种 方法 可 以 用 来 删除 工作 线程 ， 分 别 是 在 主线 程 进行 删除 的 方法 和 在 工作 线程 中 对 自身 进行 删 
除 的 方法 。 如 果 要 在 主线 程 删除 一 个 工作 线程 ， 我 们 可 以 调用 Worker 实例 的 terminate 方法 。 如 果 要 在 




















工作 线程 中 删除 自身 ， 则 可 以 调用 close 方法 (代码 清单 18.3 )。 


上 代码 清单 18.3 工作 线程 的 删除 
// 在 主线 程 中 进行 删除 的 情况 


worker.terminate(); 


// 在 工作 线程 中 删除 自身 的 情况 


self.close(); 
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不 过 ， 要 再 次 创建 工作 线程 的 成 本 也 并 不 低 ， 所 以 ， 如 果 要 频繁 地 调用 工作 线程 进行 处 理 ， 或 创建 
工作 线程 时 需要 花费 相当 的 时 间 时 ， 则 不 建议 每 次 都 删除 工作 线程 ， 而 应 该 反复 使 用 已 有 的 工作 线程 。 


国 18.2.5 外 部 文件 的 读 取 | 


可 以 通过 调用 importScripts 方法 ， 以 在 工作 线程 内 部 读 取 外 部 的 JavaScript 文件 。importScript 可 以 
读 取 非 同 源 的 文件 ， 所 以 在 有 些 情况 下 ， 能 够 实现 比 JSONP 方式 更 为 便捷 易 用 的 跨 源 通信 。importScript 
是 采用 同步 的 方式 读 取 文 件 的 ， 所 以 不 必 考 虑 文件 的 读 取 等 竺 问题。 其 参数 可 以 同时 指定 多 个 文件 ( 代 
码 清单 18.4 )。 
有 代码 清单 18.4 importScript 的 使 用 示例 


// 外 部 JavaScript 文件 的 读 取 
self.importScripts('http://www.foo.org/external.js', 'dependent .js'); 


// 此 时 ,外 部 Javascipt 文件 中 的 内 容 已 经 被 分 析 求 值 


dependent .some method('foo', 'bar'); 










































































| 18.3 | Web Worker 实践 


接 下 来 ， 请 大 家 尝试 一 下 使 用 工作 线程 来 进行 程序 设计 。 在 接 下 来 将 要 编写 的 范例 中 ， 在 文本 框 中 
输入 了 文字 之 后 ， 就 会 在 客户 端 搜 索 用 户 名 ， 并 将 其 显示 出 来 。 由 于 搜索 操作 是 通过 Web Workers 在 后 
台 进 行 的 ， 因 此 即使 正在 进行 复杂 的 搜索 处 理 时 ， 也 不 会 阻 断 UI 刷新 。 本 节 将 会 在 实现 具有 实际 意义 的 
搜索 功能 的 同时 ， 对 Web Workers 程序 设计 的 要 点 进行 说 明 。 


国 18.3.1 工作 线程 的 使 用 l 
首先 ， 我 们 通过 使 用 工作 线程 ， 来 实现 一 个 具有 简单 的 搜索 功能 的 范例 。 代 码 清单 18.5 中 是 工作 线 
程 中 的 源 代码 。 
上 代码 清单 18.5 ”使 用 工作 线程 实现 搜索 功能 的 示例 

// 用 户 数据 


var userList = [ 
Melloliro ENO 
'Shota HAMABE', 
"Takuro TUCHIEY. 
/* 及 更 多 用 户 */ 




























































































} 

// 接收 消息 

self.onmessage = function(event) { 
// 通过 所 接收 的 消息 来 创建 正则 表达 式 


var reg = new RegExp (event.data, 'i'), 
nem SS 7 














// 搜索 与 正则 表达 式 相 匹配 的 用 户 
userList.forEach (function(user) { 
if (reg.test (user)) { 








html += '<]i3' + User + </li>'; 
} 
} 
// 发 送 包含 搜索 结果 的 HTML 字符 串 
self .postMessage (html) 
Da 
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在 工作 线程 中 ， 将 根据 所 接收 到 的 字符 串 来 创建 正则 表达 式 ， 并 以 该 正则 表达 式 按 顺 序 搜索 大 量 
户 数 据 ， 在 对 所 有 的 用 户 数据 完成 检查 之 后 ， 将 匹配 结果 返回 给 主线 程 。 

这 里 的 要 点 在 于 ， 由 于 应 尽 可 能 地 在 工作 线程 中 ， 对 所 有 工作 线程 能 够 进行 的 操作 进行 处 理 ， 因 此 
HTML 字符 串 的 构造 也 是 在 工作 线程 中 完成 的 。 而 随 着 主线 程 所 要 执行 的 任务 的 减轻 ， 使 得 在 执行 搜索 
功能 时 ， 其 UI 操作 更 不 易 发 生 阻塞 。 

此 外 还 有 另 一 种 实现 方法 ， 即 通过 数组 的 形式 将 搜索 结果 返回 至 主线 程 ， 然 后 在 主线 程 中 对 HTML 
进行 构造 。 这 种 方法 的 优点 在 于 ， 与 之 前 的 做 法 相 比 ， 设 计 与 逻辑 部 分 被 很 好 地 分 离开 了 。 

这 一 范例 将 更 重视 搜索 的 速度 ， 所 以 将 会 选择 前 一 种 方法 。 

代码 清单 18.6 中 是 主线 程 中 的 源 代码 。 

上 代码 清单 18.6 主线 程 中 的 实现 示例 


<!DOCTYPE html> 
alae em oS eb el ep elo 
<div id="results"></div> 
Se 
// 创建 工作 线程 
Var worker = new Worker('worker.js'), 
textbox document .getElementById('textbox'), 
results document .getElementByIlId('results'); 


// 接收 来 自 工作 线程 的 搜索 结果 
worker.onmessage = function(event) { 

results.innerHTML = event .data; 
后 


// 将 文本 框 中 的 内 容 发 送 至 工作 线程 

textbox.onkeyup = function(event) { 
worker .postMessage (textbox.value); 
results.innerHTML = '! 


二 

























































































4 

在 主线 程 中 ， 将 会 在 文本 框 中 有 按键 输入 时 向 工作 线程 发 送 搜索 请 求 。 由 于 使 用 了 工作 线程 ， 因 此 
无 论 用 户 数据 增加 多 少 ， 搜 索 处 理 都 不 会 阻塞 UI 操作 (不 过 ， 如 果 要 一 次 性 绘制 大 量 的 搜索 结果 ， 则 仍 
有 可 能 会 使 UI 操作 阻塞 ) 如 果 没 有 使 用 工作 线程 ， 则 会 在 搜索 用 户 数据 的 过 程 中 阻塞 UI 的 更 新 ， 连 广 
本 框 的 输入 操作 都 将 无 法 进行 。 


国 18.3.2 中断 对 工作 线程 的 处 理 | 


其 实在 之 前 的 范例 (代码 清单 18.5、 代 码 清 单 18.6 ) 中 ， 有 一 个 很 严重 的 问题 。 这 个 问题 就 是 ， 如 
果 工 作 线程 在 执行 搜索 处 理 的 过 程 中 ， 又 收 到 了 下 一 个 搜索 请 求 的 话 ， 则 会 等 待 之 前 的 搜索 处 理 结 束 ， 
再 开始 新 的 处 理 。 

为 了 解决 这 一 问题 ， 需 要 使 工作 线程 的 处 理 能 够 在 任意 时 刻 被 中 断 。 对 此 ， 主 要 有 两 种 方法 。 

@ 重新 创建 工作 线程 ( 在 主线 程 中 解决 这 一 问题 ) 

@ 使 用 计时 器 ( 在 工作 线程 中 解决 这 一 问题 ) 
图 重新 创建 工作 线程 

在 第 一 种 方法 中 ， 主 线程 将 会 在 发 送 消息 时 重新 创建 工作 线程 。 只 要 丢弃 该 工作 线程 ， 其 正在 执行 
的 处 理 也 就 会 被 强制 中 断 。 代 码 清单 18.7 是 一 个 示例 。 

这 种 方法 的 好 处 在 于 ， 无 需 修改 工作 线程 中 的 代码 。 而 相对 地 ， 其 缺点 在 于 产生 了 重新 创建 工作 线程 
的 成 本 。 对 于 本 例 中 这 样 需要 频繁 调用 工作 线程 的 情况 来 说 ， 创 建 工作 线程 所 花费 的 成 本 是 不 容 小 视 的 。 
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上 代码 清单 18.7 通过 重新 创建 工作 线程 来 实现 处 理 的 中 断 


var worker = null; 














// 在 输入 后 ， 重 新 创建 工作 线程 
textbox.onkeyup = function(event) { 
// 强制 结束 已 有 的 工作 线程 
if (worker) { 
worker.terminate(); 
worker = null; 

















} 
// 工作 线程 的 创建 


worker = new Worker('worker.js'); 
worker.onmessage = function(event) { 
results.innerHTML = event .data; 











// 将 文本 框 中 的 内 容 发 送 至 工作 线程 
worker .postMessage (textbox.value); 
results.innerHTML = ''; 


i 
园 使 用 计时 器 

另 一 种 方法 是 在 工作 线程 中 通过 计时 器 中 断 处 理 。 如 果 将 复杂 的 处 理 分 割 成 小 块 ， 并 通过 计时 需 来 
执行 ， 就 能 够 在 处 理 的 切 分 处 插入 message 事件 ， 并 通过 取消 计时 需 来 实现 处 理 的 中 断 操 作 。 代 码 清 
18.8 是 一 个 例子 。 

这 种 方法 的 好 处 在 于 ， 在 调用 时 不 会 产生 创建 工作 线程 的 开销 。 其 缺点 则 是 由 于 要 通过 计时 器 实现 
分 割 处 理 ， 因 此 工作 线程 的 代码 复杂 度 将 会 增加 ， 从 而 使 得 完成 整个 处 理 所 需 的 总 时 间 增 长 。 
在 现在 的 例子 中 ， 我 们 将 会 以 100 行为 单位 切 分 用 户 数据 ， 以 执行 搜索 处 理 。 在 所 有 的 搜索 处 理 都 完 
成 之 后 ， 将 会 返回 搜索 结果 。 在 实际 中 ， 以 多 大 的 单位 分 割 都 可 以 ， 同 时 也 并 不 需要 将 所 有 的 结果 一 起 返 
回 。 对 于 各 种 不 同 的 情况 ， 有 着 不 同 的 最 佳 分 制 方案 ， 应 有 针对 性 地 选择 合适 的 方法 。 


上 代码 清单 18.8 通过 计时 器 来 实现 处 理 的 中 断 
// 用 户 数据 


YaTEwsETTeE 三 让 
'Seiichiro INOUE' ， 
'Shota HAMABE', 
'Takuro TUCHIE!', 
/* 及 更 多 用 户 */ 




































































































































































ba 


var timer = null; 
self.onmessage = function(event) { 
// 中 断 正 在 执行 的 处 理 


clearinterval (timer); 








// 将 值 重 置 

Var reg = new RegExp (event.data, 'i'), 
IE 了 开 7 
pos = 0; 














// 通过 计时 器 进行 分 割 并 执行 
timer = setInterval (function() { 
// 以 100 行为 单位 进行 处 理 
userList.slice(pos, (pos += 100)) .forEach(function(usez) { 
if (reg.test (user)) { 
html += "<li>' se + "</li>'; } 
网 区 


// 如 果 完 成 了 所 有 的 处 理 ， 则 返 























口 


搜索 结果 
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if (pos >= userList.length) { 
self.postMessage (html); 
clearinterval (timer); 


| 18.4 | 共享 工作 线程 








国 18.4.1 共享 工作 线程 的 定义 | 
之 前 所 讲 的 工作 线程 ， 总 是 与 某 一 特定 对 象 具有 一 一 对 应 的 关系 。 不 过 ， 在 Web Workers 中 ， 也 提 









































供 了 工作 线程 的 共享 功能 ， 这 种 情况 下 ，1 个 了 1 t 享 引用 。 为 了 区 分 于 通常 的 工 
0 这 种 类 型 的 工作 线程 被 称 为 ， “共享 工作 线程 ”( 图 18.3 )。 此 时 同 源 策略 的 限制 仍然 存在 ， 不 过 
经 能 够 同时 在 多 个 不 同 的 窗口 之 间 引 用 同一 个 共享 工作 线程 。 
在 使 用 了 共享 工作 线程 之 后 ， 需 要 创建 的 工作 线程 的 数量 将 会 减少 ， 从 而 节约 了 资源 。 同 时 在 创建 
了 工作 线程 之 后 就 不 需要 再 次 重复 创建 ， 也 就 避免 了 工作 线程 的 创建 开销 。 
共享 工作 线程 有 多 种 应 用 方式 ， 举 例 来 说 ， 可 以 通过 共享 工作 线程 来 实现 窗口 间 的 消息 收发 ， 或 者 以 
共享 工作 线程 作为 中 转 ， 将 服务 器 连接 相 整 合 。 这 些 技术 使 得 各 种 各 样 的 应 用 方式 成 为 可 能 。 


| 图 18.3 ”工作 线程 与 共享 工作 线程 


- 
> 


国 18.4.2 共享 工作 线程 的 创建 | 


我 们 可 以 通过 调用 SharedWorker 类 的 构造 函数 来 创建 共享 工作 线程 。 其 第 1 个 参数 和 通常 的 工作 线 
程 一 样 ， 需 要 指定 一 个 JavaScript 文件 的 URL， 而 其 第 2 个 参数 所 指定 的 则 是 该 共享 工作 线程 的 名 称 。 
如 果 省 略 了 第 2 个 参数 ， 则 会 默认 使 用 空 字符 。 
此 时 ， 如 果 在 不 同 的 窗口 中 ， 以 同样 的 文件 及 共享 工作 线程 名 来 执行 SharedWorker 构造 
函数 ， 且 该 共享 工作 线程 已 经 被 创建 的 话 ， 则 会 一 个 引用 了 相同 共享 工作 线程 的 SharedWorker 实 
例 。 代 码 清单 18.9 是 一 个 例子 。 其 中 的 workerl i i 引用 了 同一 个 共享 工作 线程 。 


有 代码 清单 18.9 共享 工作 线程 的 创建 
// 创建 共享 工作 线程 (在 http://example.com/foo.html 中 执行 ) 


var workerl1l = new SharedWorker('worker.js', 'test-worker'); 
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// 创建 共享 工作 线程 ( 在 http://example.com/bar.html 中 执行 ) 
Var worker2 = new SharedWorker ('worker.js', 'test-worker'); 





国 18.4.3 共享 工作 线程 的 消息 收发 | 


对 于 通常 的 工作 线程 来 说 ， 消 息 的 收发 是 通过 全 局 对 象 的 的 postMessage 方法 与 message 事件 来 实现 
的 。 而 对 于 共享 工作 线程 来 说 ， 能 够 进行 消息 收发 的 目标 不 止 一 个 ， 所 以 需要 有 一 些 机 制 来 实现 与 特定 
目标 之 间 的 消息 收发 。 

在 使 用 共享 工作 线程 进行 消息 的 收发 时 ， 甚 内 部 使 用 了 信道 通讯 “。 所 谓 信道 通讯 指 的 是 ， 一 种 通过 
名 为 MessagePort 的 成 组 对 象 进行 消息 收发 的 机 制 。 在 一 个 MessagePort 对 象 中 调用 postMessage 的 话 ， 
另 一 个 MessagePort 对 象 的 message 事件 就 会 被 触发 ( 图 18.4 )。 


| 18.4 ”MessagePort 的 概念 图 








































































































在 主线 程 中 创建 的 SharedWorker 实例 具有 port 这 一 属性 名 ， 该 属性 可 以 引用 MessagePort 对 象 的 
其 中 一 个 。 我 们 可 以 在 主线 程 中 通过 该 port， 来 实现 与 通常 的 工作 线程 相同 的 消息 收发 操作 。 代 码 清 
18.10 是 一 个 例子 。 

有 代码 清单 18.10 在 主线 程 中 进行 消息 收发 
// 共享 工作 线程 的 创建 


Var worker = new SharedWorker('http://www.foo.org/bar.js'); 





























// 通过 MessagePort 发 送 消息 

worker .port .postMessage ('foo'); 

// 通过 MessagePort 接收 消息 

worker.port.onmessage = function(event) { 
Var receivedData = event .data; 


/* 进行 一 些 处 理 */ 

















be 

在 主线 程 中 创建 了 SharedWorker 实例 之 后 ， 就 会 触发 共享 工作 线程 的 connect 事件 。 这 时 ， 在 
connect 事件 对 象 中 有 一 个 MessagePort 对 象 ， 该 对 象 与 请 求 连接 的 主线 程 中 所 具有 的 MessagePort 对 象 
是 相对 应 的 。 通 过 这 一 MessagePort 来 发 送 与 接受 消息 的 话 ， 就 能 够 与 请 求 连 接 的 主线 程 进行 消息 收发 处 
理 。 代 码 清单 18.11 是 一 个 例子 。 
有 代码 清单 18.11 在 共享 工作 线程 中 进行 消息 收发 

// 来 自 于 主线 程 的 连接 请 求 
































D http://dev.w3.org/html5/postmsg/#channel-messaging/ 
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self.onconnect = function(connectEvent) { 
// 获取 连接 请 求 方 的 MessagePort 


warsport eonneetbevent i oresl ol 


// 通过 MessagePort 发 送 欢 迎 信息 
port .postMessage('Hello, SharedWorker!'); 





// 通过 MessagePort 接收 消息 
port.onmessage = function(messageEvent) { 
// 将 所 接收 的 数据 直接 回复 


port .postMessage (messageEvent .data); 


bs 


项 18.4.4 共享 工作 线程 的 删除 
























































由 于 可 以 同时 在 多 个 窗口 中 引用 共享 工作 线程 ， 因 此 与 通常 的 工作 线程 不 同 ，SharedWorker 实例 中 


是 没有 terminate 方法 的 。 如 果 和 希望 在 主线 程 中 关闭 某 些 连接 ， 需 要 调用 MessagePort 的 close 方法 。 


worker .Port .close() ; 


















































而 即使 在 主线 程 中 调用 了 close 方法 ， 只 要 还 有 其 他 窗口 正在 对 共享 工作 线程 进行 引用 ， 该 线程 就 不 
会 被 删除 。 只 有 在 最 后 一 个 引用 也 被 释放 时 ， 该 共享 工作 线程 才 会 被 删除 。 不 过 ， 和 通常 的 工作 线程 一 












































样 ， 随 时 都 能 通过 调用 共享 工作 线程 中 的 close 方法 来 关闭 自身 。 


self.close(); 





国 18.4.5 共享 工作 线程 的 应 用 实例 


团 vie 



































过 对 共享 工作 线程 的 MessagePort 进行 管理 ， 就 能 够 借助 该 共享 工作 线程 实现 在 不 同窗 口 之 间 的 消 
ee ee tn ode el dete un 

















窗口 。 
| 代码 清单 18.12 ”通过 共享 工作 线程 实现 的 窗口 间 通信 
Var Domes = 


self.onconnect = function(connectEvent) { 
// 获取 连接 请 求 方 的 MessagePort 


Var port = ConnectEvent.ports[0l|; 


// a MessagePort 


Ports usm(port) 


// 向 所 有 的 窗口 发 送 消息 
port.onmessage = function (messageEvent) { 
Ports .forEach (function (e) 
e.postMessage (messageEvent .data); 
3 
后 
}; 















































如 果 只 希望 像 代码 清单 18.12 那样 ， 向 所 有 的 窗口 发 送 消 息 ， 只 需要 将 所 有 的 MessagePort 保存 




















j 于 确定 特定 窗口 的 名 称 与 





于 数组 中 即 可 实现 。 如 果 和 希望 将 消息 发 送 给 某 一 指定 的 窗口 ， 则 需要 将 
MessagePort 相关 联 并 进行 管理 。 
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园 服务 器 连接 的 整合 

共享 工作 线程 还 有 一 种 应 用 方式 ， 即 可 以 将 共享 工作 线程 作为 中 转 ， 将 服务 器 连接 结合 为 一 个 整体 。 
试 考虑 一 个 通过 WebSocket 与 服务 器 进行 通信 的 应 用 程序 。 如 果 仅 仅 是 复制 了 窗口 ， 则 会 建立 和 窗口 数 
量 相 同 的 WebSocket 连接 ， 从 而 造成 网 络 及 CPU 资源 的 浪费 。 

对 于 这 种 情况 ， 如 果 通 过 1 个 共享 工作 线程 来 对 WebSocket 通信 进行 处 理 的 话 ， 即 使 同时 打开 了 多 
个 窗口 ， 也 能 将 共享 工作 线程 作为 中 转 来 整合 这 些 WebSocket 连接 。 对 其 进行 了 引用 的 窗口 发 送 的 消息 
将 会 被 WebSocket 服务 器 所 接收 ， 而 服务 器 所 发 送 的 消息 则 会 被 分 发 至 所 有 对 其 进行 了 引用 的 窗口 。 代 
码 清单 18.13 是 其 示例 。 


| 代码 清单 18.13 ”WebSocket 连接 的 整合 


// 建立 Websocket 连接 
Var ws = new WebSocket ('ws://www.foo.org/chat'); 




























































































Varepostee = 


self.onconnect = function(connectEvent) { 
// 将 所 有 的 MessagePort 保存 至 数组 之 中 
Var port = connectEvent .Ports [0] ， 
Borts oush(eore) 


// 将 窗口 发 出 的 消息 传递 至 WebSocket 服务 器 

port.onmessage = function(messageEvent) { 
ws.send (messageEvent .data); 

)3 








ba 
// 将 来 自 于 Websocket 服务 器 的 消息 发 送 至 所 有 的 窗 


ws.onmessage = function(event) { 
ports.forEach (function(port) { 
port.postMessage (event .data); 
1 
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Web API 


在 服务 器 端 对 Web API 进行 调用 是 当前 的 主流 方 
式 。 如 果 在 客户 端 调用 Web API， 则 会 有 跨 源 限 
制 及 权限 授予 等 问题 。 不 过 ， 现 在 也 出 现 了 回避 
这 些 问 题 ， 并 通过 客户 端 JavaScript 来 调用 Web 
API 的 做 法 。 


图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 


@ 310 一 一 一 第 5 部 分 Web API 







Web API 的 基础 


本 章 将 边 回顾 Web API 的 历史 边 说 明 Web API。 在 通过 客户 端 JavaScript 调用 Web API 时 ， 
会 产生 跨 源 限制 的 问题 。 本 章 也 将 对 该 问题 的 回避 方法 进行 说 明 ， 最 后 还 会 介绍 OAuth 的 相 
关内 容 ， 在 今后 的 Web API 中 ， 这 将 是 一 种 很 重要 的 权限 授予 协议 。 


19.1 Web API 与 Web 服务 








API 这 一 术语 指 的 是 应 用 程序 与 系统 之 间 的 接口 ， 是 Application Programming Interface 的 缩写 。 在 
Web API 这 一 术语 出 现 之 前 ，API 主要 的 目标 使 用 对 象 是 操作 系统 及 框架 。 在 特定 的 操作 系统 (Unix 或 
Windows 等 ) 或 特定 的 框架 上 运行 的 程序 ， 将 会 通过 操作 系统 及 框架 所 提供 的 功能 来 执行 处 理 。 

从 程序 开发 者 的 角度 来 看 ， 程 序 代 码 所 使 用 的 是 库 (Unix 系 操作 系统 中 的 libc 或 Windows 中 的 
DLL 等 ) 中 的 函数 或 类 库 。 也 就 是 说 ， 在 开发 者 看 来 ，API 是 函数 以 及 类 的 标准 ， 是 由 他 们 所 决定 的 。 


国 Web API 的 目标 使 用 对 象 | 
图 Web API 的 定义 

Web API 的 目标 使 用 对 象 是 Web 服务 。 本 节 之 后 将 说 明 Web 服务 这 一 术语 的 定义 。 这 里 ， 我 们 首先 
假设 存在 Web 服务 这 一 体系 ， 并 以 此 为 前 提 对 Web API 进行 定义 。 

假设 存在 一 些 使 用 了 Web 服务 的 程序 。 在 Web 服务 与 这 一 程序 之 间 ， 是 通过 HTTP 进行 通信 的 。 程 
序 向 Web 服务 发 出 HITP 请 求 ， 并 接收 其 响应 。Web 服务 可 以 提供 多 种 功能 ， 这 里 假设 它 可 以 创建 一 个 
文档 ， 并 返回 处 理 结果 。 这 时 ， 通 信 所 使 用 的 规则 就 是 Web API。 

接 下 来 将 会 讲 到 ，Web API 也 能 具有 一 些 其 他 的 形式 。 例 如 ，Web API 还 可 以 是 在 内 部 隐藏 了 HITTP 
通信 的 函数 或 类 库 的 形式 。 不 过 ，Web API 最 为 基本 的 形式 就 是 一 种 HITP 的 调用 规则 。 也 就 是 说 ， 它 
包含 了 请 求 方 的 URL 定义 、 查 询 参数 名 、 响 应 格式 的 定义 等 内 容 。 

图 Web 服务 与 Web 应 用 程序 

本 节 将 继续 对 Web 服务 这 一 术语 进行 说 明 。 在 很 多 情况 下 ，Web 服务 与 Web 应 用 程序 的 用 法 没有 
太 大 差异 ， 它 们 之 间 的 区 别 并 不 那么 明显 。 两 者 的 基本 功能 没有 区 别 ， 都 是 接收 HTTP 请 求 并 返回 响应 。 
有 的 人 将 程序 所 调用 的 体系 称 为 Web 服务 ， 而 将 用 户 通 过 浏览 器 所 使 用 的 体系 称 为 Web 应 用 程序 。 

不 过 ,被 调用 方 并 没有 办 法 准确 的 区 分 自己 是 被 用 户 使 用 的 ， 还 是 被 程序 使 用 的 ， 因 此 ， 这 种 定义 
方式 从 技术 上 来 说 是 含糊 不 清 的 。 本 书 把 从 形式 上 规定 ( 定义 ) 了 HTTP 请求 及 响应 的 体系 称 为 Web 服 
务 ， 并 把 没有 进行 如 此 规定 的 体系 称 为 Web 应 用 程序 。 而 Web API 正 是 一 种 形式 上 的 规则 ， 因 此 ，Web 
API 与 Web 服务 其 实 是 表 里 一 致 的 "。 
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中 ”由 于 一 些 历 史 原 因 ， 也 有 人 将 Web 服务 等 同 于 SOAP。 这 种 定义 过 于 狭义 ， 因 此 ， 本 书 没 有 采用 。 
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国 19.2.1 Web 抓 取 








姑且 不 谈 Web 的 最 初 目的 ， 早 期 的 Web 页 面 主要 都 是 一 些 供用 户 阅读 的 文档 。 不 过 ， 文 档 与 数据 的 


























区 别 仅仅 是 由 阅读 者 决定 的 。 必 然 会 有 人 和 希望 将 在 Web 上 公开 的 文档 作为 数据 处 理 。Web 文档 的 标准 格 
式 是 HIML， 而 在 将 HIML 文档 作为 数据 处 理 时 ， 通 常会 存在 两 个 问题 。 





























一 些 包含 了 语法 错误 的 HTML 也 被 传播 了 出 去 。 








而 男 一 个 问题 则 是 ， 在 HIML 中 不 仅 包 含 了 文档 的 内 容 ， 还 写 有 布局 及 字符 修饰 等 的 设计 信息 。 虽 











首先 ，HTML 是 一 种 宽松 的 格式 。 即 使 HTML 中 存在 一 些 语法 错误 ， 浏 览 吉 也 能 正常 显示 。 因 此 ， 

















然 之 后 出 现 的 CSS 将 这 些 修 饰 部 分 分 离 到 了 CSS 中 ， 但 在 此 之 前 ，HTML 的 修饰 都 是 通过 HTML 标签 
来 实现 的 。 而 且 ， 在 CSS 出 现 之 后 ， 也 不 是 所 有 的 HTML 都 将 设计 信息 完全 地 分 离 到 CSS 中 了 。 从 数 
据 处 理 的 角度 来 看 ， 这 些 用 于 控制 页 面 设 计 的 部 分 ， 是 不 需要 的 多 余 信息 。 

在 从 HTML We 中 存在 很 多 问题 。HTML 可 能 具有 语法 错误 ， 且 在 抽取 过 程 





























中 ， 必 须 去 除 不 需要 的 信息 。 ， 这 类 处 理 被 称 为 Web 抓 取 。 
国 Web 抓 取 所 存在 的 问题 





















































会 有 所 差异 。 


此 外 ， 如 果 Web 站 点 的 HTML 进行 了 更 新 ，Web 抓 取 的 功能 可 能 就 会 失效 。 这 是 由 于 Web 站 点 的 


开发 者 在 更 新 页 面 时 并 没有 考虑 Web 抓 取 程序 的 情况 。 
围 19.2.2 语义 网 





通过 正则 表达 式 来 抓 取 的 话 ， 代 码 通常 会 很 复杂 。 不 但 难以 进行 设计 ， 且 设计 出 的 代码 一 般 只 能 用 
于 特定 的 Web 页 面 。 也 就 是 说 ， 如 果 设 计 了 一 个 用 于 抽取 Yahoo! 这 一 网 站 中 的 特定 页 面 的 程序 ， 它 是 
无 法 用 于 其 他 站 点 的 数据 抽取 处 理 的 。 这 是 因为 ， 根 据 页 面 的 不 同 ，HTML 的 结构 及 标签 的 使 用 方式 也 








































































































在 这 样 的 背景 下 出 现 了 一 种 运动 ， 主 张 将 Web 中 的 文档 从 仅 供用 户 阅读 的 内 容 ， 转 换 为 程序 也 能 
进行 处 理 的 数据 。 这 一 运动 的 影响 范围 非常 深远 ,带动 了 很 多 相关 基本 技术 的 出 现 。XML 与 CSS 都 是 











在 这 一 连 串 运动 中 出 现 的 基本 技术 。 














最 能 形象 地 表现 这 种 运动 的 词 是 语义 网 。 它 还 有 男 一 个 引 人 注 目 之 处 ， 即 它 是 由 Web 的 创始 人 ， 带 

















姆 : 伯 纳 斯 - 李 (Tim Berners-Lee ) 所 主导 的 了 














些 概念 .受到 了 语义 网 的 直接 或 间接 的 影响， 而 有 一 些 概 念 虽然 与 语义 网 没什么 关系 ， 但 却 是 于 























类 似 的 理念 所 引出 的 。 接 下 来 ， 本 章 将 从 数据 格式 与 通信 协议 这 











转 19.2s xML 





两 个 角度 整理 说 明 。 


对 于 XML 这 种 常见 的 数据 格式 ， 无 需 过 多 说 明 。XML 也 可 以 被 称 为 元 格式 。 正 如 其 名 称 所 示 
(XML 的 X 代表 的 是 eXtensible， 意 指 可 扩展 的 )， 基 于 XML， 可 以 构造 出 各 种 各 样 的 数据 格式 。 向 下 







































































兼容 XML 标准 的 程序 被 称 为 XML 应 用 程序 。 这 一 术语 不 太 直观 ， 本 书 将 使 用 XML 兼容 标准 的 称 法 。 





中 不 过 很 可 惜 ， 对 于 普通 用 户 来 说 ， 语 义 网 谈 不 上 是 一 种 成 功 。 不 过 其 理念 确实 为 现在 的 Web API 所 继承 。 对 于 语 


有 着 各 种 不 同 的 见解 与 立场 ， 因 此 ， 这 里 不 再 对 其 作 过 多 的 说 明 。 
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国 XML 的 标准 








XML 是 通过 标签 及 属性 等 规则 来 确定 标准 的 。 诸 如 <p> 这 样 的 标签 ， 在 HTML 中 很 常见 。 








容 标准 中 ， 将 会 把 p 解释 为 段落 (paragraph ) 的 p。 包 括 XHTML 在 
又 可 以 分 为 仅 在 形式 上 遵循 XML 标准 的 格式 ， 以 及 人 f 











对 基于 XML 的 格式 而 言 ， 








语言 标准 进行 了 严密 设计 的 格式 这 两 种 类 型 。 


对 于 前 者 ， 举 例 来 说 ， 在 希望 表示 价格 时 ， 可 
于 这 种 方式 从 形式 上 遵循 了 XML 标准 ， 








表达 。 由 























以 使 














内 ， 存 在 大 量 基 于 








名 为 cost 的 标签 ， 以 <cost>100</cos 











因此 可 以 通过 XML 分 析 器 抽取 其 




















XML 的 兼容 标准 。 
E 为 其 兼容 标准 ， 对 


在 这 类 鳞 














形式 





人 的 


PP 的 标签 名 及 元 素 。 








不 过 ， 因 为 标签 是 被 随意 选取 的 ， 所 以 必须 确保 数据 的 创建 方 与 解释 方 对 其 有 相同 的 定义 。 这 样 的 仅 在 











形式 上 符合 标准 的 XML 被 称 为 
另 一 方 
国 XML 的 结构 描述 ( Schema ) 




















标签 的 含义 ， 以 及 XML 的 构造 规则 ， 被 称 为 XML 的 结构 描述 。 


# 式 良好 的 XML 文档 。 
押 ， 严 密 设 计 了 cost 标签 的 含义 的 兼容 标准 ， 则 被 称 为 合法 的 XML 文档 。 


语言 有 DTD、XML Schema、RELAX NG 等 。 








DTD 是 最 古老 的 描述 语言 ， 











且 没 有 类 型 的 概念 。 即 对 本 





这 一 含义 进行 表述 。 而 另 一 方面 ， 
Web API 来 说 ， 这 是 很 实用 的 。 

在 封闭 环境 ， 或 试验 性 质 
档 。 不 过 ， 在 公开 的 Web API 中 ， 






























































用 于 书写 结构 描述 的 具有 代表 性 的 


F cost 标签 来 说 ， 无 法 对 元 素 的 值 是 一 个 数值 


之 后 出 现 的 XML Schema 及 RELAX NG 则 可 以 对 类 型 进行 表述 。 对 于 


的 服务 中 ， 也 可 以 省 


























通常 都 会 使 用 
最 近 已 经 很 少 用 DTD 来 书写 结构 描述 了 ， 
如 果 存 在 多 种 新 型 的 结构 描述 定义 方式 ， 将 会 导致 出 现 多 种 类 型 的 标准 特殊 的 XML。 














般 使 用 


























因此 ， 人 们 


各 复杂 的 结构 描述 定义 ， 而 使 用 形式 良好 的 XML 文 
合法 的 XML 文档 。 
的 是 XML Schema 或 RELAX NG。 话 虽 


如 此 ， 
始 为 

















避免 出 现 大 量 特殊 的 XML 兼容 标准 而 努力 。 其 中 ， 对 于 Web API 来 说 ， 则 出 现 了 Atom 这 一 逐渐 成 为 





XML 默认 标准 的 标准 。 


国 19.2.4 Atom 

















Atom 的 最 初 目 的 是 用 于 替代 RSS。RSS 是 一 种 消息 来 源 (Feed ) 格式 的 事实 标准 ， 可 以 
Web 站 点 的 更 新 信息 。RSS 最 初 是 一 种 独立 标准 ， 而 Atom 则 是 基于 IETF 的 标准 。 








对 于 消息 来 源 而 言 ， 














































































































] 于 分 发 











Atom 并 不 一 定 能 取代 RSS 的 地 位 ， 不 过 对 Web API 来 说 ，Atom 则 具有 重要 的 
苇 于 ( 元 格式 ) XML 的 标准 ， 而 另 一 方面 ， 








它 本 











外 分 为 Atom Syndication Format (rfc4287 ) 与 Atom Publishing Protocol ( rfe5023 ) 这 两 种 标准 。 





于 Web 文档 的 更 新 。 前 者 所 规定 的 














作用 。 下 面 的 说 法 或 许 有 些 混乱 ，Atom 一 方面 是 一 种 
身 也 是 一 种 可 以 自 扩 展 的 元 标准 。 
Atom 可 
前 一 种 标准 的 主要 用 于 消息 来 源 。 后 一 种 标准 主要 用 
式 ， 后 者 则 
来 传递 XML 形式 的 指令 ， 与 接 下 来 将 会 介绍 
将 会 对 此 做 进一步 说 明 。 





加 19.2.5 JsoN 


在 Web API 的 数据 格式 中 ， 与 Atom 同等 
也 有 密切 的 关联 ， 它 现在 与 XML 并 称 为 Web API 数据 格式 的 两 大 





是 数据 格 























式 将 被 整合 至 XML 与 JSON 两 者 也 不 为 过 。 
JSON 格式 的 详细 信息 请 参见 第 7 章 。 











会 将 符合 该 格式 的 Atom 数据 载 入 HITP， 将 更 新 数据 作为 一 种 更 新 指令 来 使 用 。 通 过 HTTP 
的 SOAP 的 功能 很 相似 。 而 在 REST 的 相关 内 容 中 ， 本 章 


E 要 的 一 种 格式 是 JSON。JSON 与 本 书 的 主题 JavaScript 





巨头 。 事 实 上 ， 称 Web API 
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的 数据 格 
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国 19.2.6 soaPr | 


在 此 ， 从 Web API 通信 协议 的 角度 来 回顾 一 下 历史 。 可 以 把 HTTP 理解 为 RPC (远程 过 程 调用 )。 
简单 来 讲 ，PRC 是 跨越 网 络 的 函数 ( 子 程序 ) 调用 。Web 文档 最 初 是 作为 数据 来 使 用 的 ， 类 似 地 ，HTTP 
最 初 是 作为 RPC 使 用 的 。 

在 使 用 Web 时， 常常 会 在 浏览 器 的 表单 中 输入 值 ， 并 将 其 发 送 。 在 画面 上 可 以 看 到 的 是 ， 表 单 输入 
及 按钮 点 击 的 操作 ， 而 在 内 部 进行 的 则 是 通过 HTTP 发 送 该 值 的 操作 。 将 该 值 发 送 并 等 待 响应 的 操作 ， 
可 以 被 理解 为 通过 HTTP 这 一 通信 协议 ， 调 用 了 远程 的 子 程序 。 从 RPC 的 角度 来 看 ， 所 发 送 的 值 就 相当 
于 传递 给 函数 的 参数 。 表 单 所 支持 的 输入 值 取 决 于 表单 设计 ， 为 了 实现 更 为 广义 的 RPC， 必 须 对 参数 进 
行 形式 上 的 定义 。 其 中 具有 代表 性 的 格式 是 SOAP。 

国 SOAP 与 RPC 

SOAP 是 基于 其 前 身 , XML-RPC 这 一 自 定义 标准 所 定义 的 一 种 标准 标准 ”。SOAP 通过 XML 来 表述 
参数 。 用 一 种 可 能 会 产生 歧义 的 方式 来 说 的 话 ，SOAP 是 一 种 通过 XML 来 表述 命令 的 RPC。SOAP 是 独 
立 传输 的 ， 可 以 对 XML 所 表述 的 命令 在 网 络 中 的 传输 方式 进行 自由 设 定 。 不 过 在 实际 中 ， 一 般 都 默认 
使 用 HTTP 传输 ， 因 此 本 书 将 以 此 为 前 提 。 也 就 是 说 ，SOAP 通过 HTTP 来 传输 XML 所 表述 的 指令 ， 并 
以 此 实现 RPC。 

2000 年 前 后 ，SOAP 与 Web 服务 这 一 术语 一 起 被 广 为 宣 传 。 由 于 宣传 力度 很 大 ，SOAP 几乎 被 等 同 
于 了 Web 服务 。 由 于 这 一 影响 至 今 仍 然 存 在 ， 因 此 一 些 没有 使 用 SOAP 的 Web API， 会 避免 使 用 Web 服 
务 这 一 术语 。 

存在 大 量 与 SOAP 与 Web 服务 相关 的 标准 。 这 里 我 们 仅 介绍 其 中 最 为 重要 的 两 种 标准 一 一 WSDL 与 
UDDI。WSDL 是 对 接口 进行 定义 的 描述 语言 。 如 果 说 SOAP 是 用 于 RPC 调用 的 标准 ，WSDL 的 作用 则 
是 对 RPC 的 格式 (参数 及 返回 值 ) 进行 描述 。UDDI 是 用 于 WSDL 检索 目录 的 描述 语言 。 























































































































































































































































































































国 19.2.7 REST | 


仅 从 形式 上 来 看 ，Atom Publishing Protocol 与 SOAP 是 相似 的 ， 它 们 都 会 通过 HTTP 传递 XML 形式 
的 指令 。 不 过 ， 这 样 的 想法 是 不 正确 的 。Atom 基于 的 是 REST 的 理念 ， 而 REST 可 以 说 和 RPC 是 相悖 
的 。 这 里 先 将 REST 与 SOAP 进行 比较 以 说 明 其 不 同 ， 之 后 还 将 再 次 说 明 一 下 REST。 
转 与 SOAP 的 比较 

SOAP 基于 的 是 RPC 的 理念 ， 以 调用 远程 子 程序 ”。 因 此 ，HTTP 上 所 传输 的 XML 被 认为 是 指令 。 

而 男 一 方面 ， 根 据 REST 的 理念 , 在 HITP 上 传输 的 数据 。 也 可 以 将 这 里 的 数据 替换 为 文档 或 资源 。 
对 于 REST 来 说 ， 服 务 器 上 的 资源 或 用 于 更 新 文档 的 更 新 信息 ， 都 是 通过 HTTP 传递 的 。 而 HTTP 方法 
(GET 及 POST ) 则 相当 于 指令 。 也 就 是 说 ， 在 Atom 中 所 写 的 信息 并 不 是 指令 ， 而 是 用 于 更 新 的 数据 。 
19.2.4 节 使 用 了 XML 形式 的 指令 这 一 说 法 ， 严 格 来 讲 ， 这 是 不 正确 的 。 


国 19.2.8 简单 总 结 l 
让 我 们 简单 回顾 一 下 Web API 的 历史 。Web API 是 Web 服务 的 调用 规则 。 目 前 Web API 的 发 展 趋势 

















































































































中 不 过 ， 由 于 SOAP 标准 过 于 复杂 ， 也 有 一 些 Web API 仍 然 在 使 用 XML-RPC。 此 外 还 有 一 种 使 用 JSON 执行 功能 的 
JSON-RPC， 它 同时 继承 了 XML-RPC 的 语义 。 

加 以 面向 对 象 的 方式 来 解释 远程 子 程序 的 话 ， 他 们 使 用 的 是 远程 对 象 。SOAP 所 调用 的 是 远程 对 象 的 方法 。 广 义 上 来 说 ， 远 
程 对 象 也 是 一 种 RPC， 所 以 本 书 将 以 RPC 的 方式 来 说 明 SOAP 
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是 ，XML 与 JSON 逐渐 成 为 了 标准 的 数据 格式 。 此 外 ， 其 通信 协议 主要 分 为 基于 SOAP 与 基于 REST 的 两 
基于 SOAP 的 协议 与 XML 关系 密切 ， 而 基于 REST 的 协议 则 与 XML 中 的 Atom 或 JSON 相关 。 


大 类 型 。 





19.3 | Web API 的 组 成 





























国 19.3.1 Web API 的 形式 






































表 19.1 总 结 了 Web API 的 形式 的 演进 ， 下 一 章 的 实例 也 会 再 次 提 及 这 一 内 容 。 不 过 ，HTTP API 与 

语言 API 是 本 书 自 定义 的 术语 ， 对 此 请 加 以 注意 ”。 

表 19.1 Web API 的 演进 

名 称 说 明 

Web 抓 取 非 官方 手段 

HTTP API 定义 了 请 求 URL 及 响应 数据 的 形式 

语言 AP| 定义 了 函数 及 类 库 ( JavaScript APl|、JavaScript 库 ) 

微 件 API HTML 的 代码 片段 














国 HTTP API 与 语言 API 





直至 HITP 级 别 的 标准 制定 之 后 ，Web API 的 历史 才 真正 开始 。 从 开发 者 的 角度 来 看 ， 使 用 HTTP 


API 即 是 一 种 网 络 程序 设计 。HTTP 的 查询 参数 需要 自 

在 能 够 对 HTTP 的 详细 信息 进行 函数 调用 ， 
阶段 。 在 这 类 语言 API 中 ， 有 一 些 是 Web API 的 提供 者 ( 服务 提供 者 ) 自 
己 制 作 的 第 三 方 API。 即 使 Web API 的 提供 者 
API。 委 





开发 者 自 
泛 使 用 ， 

















则 通常 会 有 第 三 方 为 其 制作 语 
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已 














己 构建 








且 出 现 了 能 够 隐藏 类 的 库 之 后 ，Web API 发 展 至 了 第 








， 响 应 也 需要 自己 来 分 析 。 





| 
[一 


提供 的 ， 也 有 一 些 是 无 关 的 











只 提供 了 HTTP API， 如 果 该 Web API 得 到 了 广 
三方 制作 的 API 虽然 是 非 官方 的 ， 但 如 果 成 为 了 主流 ， 











也 就 成 为 了 事实 上 的 标准 库 。 此 外 ， 就 算 存 在 官方 的 语言 API， 提 供 者 也 无 法 为 世上 所 有 的 程序 设计 语 








言 都 提供 API。 因 此 ， 非 主 
即使 存在 官方 的 语言 API， 








是 一 种 机 密 。 毕 竞 HTTP 通信 本 身 就 没有 什么 机 密 内 容 。 





格式 作为 一 种 标准 标准 公布 于 众 。 
不 公开 HITP 级 别 的 API 的 好 处 在 了 

















以 再 更 改 。 而 如 果 不 公 开 ， 即 使 更 改 了 HTTP 级 别 的 通 


图 JavaScript API 与 微 件 API 
在 语言 API 所 支持 的 语言 





能 没有 


i 语言 的 语言 API 还 是 需要 借助 第 三 方 的 非 官 方 API。 
其 HTTP 级 别 的 API 也 可 














公开 。 这 里 的 没有 公开 ， 并 不 是 说 它们 




















这 里 指 的 是 ， 这 些 API 没有 将 其 HTTP 级 别 的 























F ， 服 务 提 供 者 的 自由 度 将 会 提高 。 一 旦 公开 了 HTTP API， 就 难 
信 ， 也 能 通过 语言 API 来 处 理 这 一 更 改 。 


中 ，JavaScript 并 不 是 主流 。 当 


























前 ,在 使 用 Web API 时， 从 





服务 需 端 调用 是 





主流 做 法 ， 之 后 一 节 也 会 对 此 进行 说 明 。 不 过 渐渐 地 ， 在 客户 端 ， 也 就 是 浏览 器 中 调用 Web API 的 情况 








也 越 来 越 多 了 。 客 


户 端 JavaScript 所 使 用 的 语 
地 区 ， 微 件 也 被 称 为 博客 插件 (blog part )“。 也 有 人 将 其 称 为 小 工具 或 插件 
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旺 














API 或 微 件 


式 的 API 将 会 逐渐 成 为 发 展 方向 。 在 有 些 


O 





只 要 将 特定 功能 的 代码 片段 复制 粘贴 至 HIML 内 ， 即 可 使 用 微 件 。 在 微 件 中 隐藏 有 语言 API， 其 中 




















进一步 隐藏 了 HTTP API。 
层次 的 API。 











] 户 不 需要 知道 其 详细 的 内 部 实现 就 能 够 使 





目 . 晤 .站 


态 取 [机 











j。 从 这 一 点 上 来 说 ， 微 件 





正如 之 前 小 节 所 讲 ，Web 抓 取 是 一 种 可 以 以 任意 方式 对 公开 的 HIML 及 HTTP 通信 进行 分 析 的 方式 。 如 果 目 标 HTML 的 


结构 发 生 了 改变 , 则 必须 重新 书写 。 它 虽然 无 法 被 称 为 是 一 种 Web API, 但 仍然 作为 Web API 的 早期 历史 而 被 记录 在 了 表 内 。 





在 很 多 博客 模板 中 ， 都 提供 了 类 似 于 微 件 的 功能 ， 故 而 得 名 。 一 一 译 者 注 
微 件 一 词 也 有 gadget、plugin 等 名 称 。 这 里 统一 使 用 微 件 这 一 译 法 。 


译 者 注 
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Google 或 Amazon 的 搜索 框 这 类 的 微 件 类 型 ,很 早 以 前 就 存在 了 。 最 近 还 出 现 了 不 使 用 iframe 的 形 
式 ， 以 及 可 以 调用 用 于 用 户 验证 的 API 的 微 件 API。 目 前 流行 的 Web API 多 以 这 种 方式 发 展 。 下 面 是 一 
些 具体 的 实际 例子 ， 在 之 后 的 章节 中 还 将 介绍 。 


® Facebook Social Plugin 








@ Twitter @anywhere 
@ Google Friend Connect ( GFC ) 


国 19.3.2 Web API 的 使 用 | 


根据 Web API 的 调用 位 置 的 不 同 ， 可 以 按照 以 下 方式 分 类 : 

@ 在 服务 器 ( Web 程序 ) 中 调用 

@ 在 浏览 器 中 调用 

@ 在 原生 应 用 程序 中 调用 ( 桌面 程序 或 智能 手机 应 用 ) 

当前 的 主流 做 法 是 在 服务 器 中 调用 Web API。 而 这 一 部 分 的 主题 ， 客 户 端 JavaScript， 并 不 是 主流 的 
Web API 调用 方式 。 其 理由 之 一 是 ， 在 通过 客户 端 JavaScript 调用 Web API 时 ， 存 在 以 下 问题 ( 图 19.1 )。 

@ 跨 源 限 制 

@ 无 法 对 Web API 的 调用 加 密 ( API 密 钥 等 ) 














| 19.1 ”在 通过 客户 端 JavaScript 调用 Web API 时 存在 的 问题 


Web 服务 器 
| HTML 文 件 ef 
乡 < JS 文件 ee i 


浏览 器 










Web API | 
HTML 文件 上 中 os 
> mB 人 六- 
>” XHR 跨 源 通信 | 
Web 服务 器 





API 密 钥 











关于 跨 源 限制 的 问题 ,第 3 部 分 已 经 进行 了 说 明 。 本 节 将 再 次 总 结 一 下 该 问题 的 主要 的 解决 方法 。 
详细 的 内 容 请 参见 第 3 部 分 ， 以 及 下 一 章 中 的 实际 例子 。 

@ 通过 服务 器 中 转 ( 代理 ) 

® JSONP 

@ XMLHttpRequest2 ( CORS : Cross-Origin Resource Sharing ) 

@ 框架 (iframe ) 间 的 协作 

® PostMessage 

@ 跨 源 接收 者 








国 19.3.3 REsTful API | 


非 SOAP 类 型 的 Web API 统称 为 REST API 或 RESTful API (REST 式 的 API)。 既 非 SOAP 又 非 
RESTful 的 Web API 定义 方式 也 有 很 多 ， 因 此 ， 这 种 称 法 从 理论 上 来 说 是 不 正确 的 。 不 过 这 种 称 法 已 经 
被 广 为 使 用 ， 所 以 本 书 也 将 使 用 这 一 方式 。 
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园 REST 的 定义 

REST 这 一 术语 的 出 现 ， 与 Web API 并 没有 什么 关系 。REST 是 Representational State Transfer 的 缩 
写 ， 是 由 HTTP 标准 的 其 中 一 位 制定 者 罗 伊 : 菲 尔 丁 (Roy Fielding ) 在 其 论文 中 使 用 的 自 造 词 。REST 
这 一 术语 并 不 指 代 某 一 特定 的 技术 ,该 术语 的 出 现 ， 是 为 了 在 分 析 Web 架构 时 ， 指 代 Web 所 具有 的 分 布 
式 系 统 模式 这 一 特征 。 也 就 是 说 ， 首 先是 有 了 Web 这 一 实际 的 系统 ， 之 后 才 通 过 论文 对 如 何 扩 放 Web 进 
行 分 析 的 。 之 后 ， 这 一 模式 被 命名 为 REST， 而 Web 是 一 种 遵循 了 REST 模式 的 分 布 式 系统 ， 从 而 得 到 
了 能 够 对 其 进行 扩 放 的 结论 。 
在 REST 中 ， 分 布 式 系统 中 的 对 象 被 称 为 资源 。 如 果 通 过 URI 这 一 命名 空间 来 访问 资源 ， 则 能 使 
其 以 某 种 特定 的 形式 实例 化 。 试 考虑 实际 的 Web 的 情况 ,我们 可 以 理解 为 ,浏览 器 访问 了 服务 器 之 后 ， 
服务 器 端 所 管理 的 数据 被 以 指定 的 格式 (XML 或 JSON 等 ) 返回 至 浏览 器 。 可 以 通过 HTTP 的 GET、 
POST、PUT、DELETE 方法 来 对 资源 进行 获取 、 创 建 、 更 新 及 删除 操作 。 

REST 的 特征 是 只 能 够 执行 资源 的 更 新 这 一 种 远程 操作 。 在 REST 之 前 ， 分 布 式 系统 的 主流 选择 是 
RPC。SOAP 或 CORBA 等 分 布 式 对 象 也 属于 RPC 的 分 支 。 这 些 RPC 的 核心 是 ， 对 分 布 式 系统 进行 子 程 
序 调用 ， 或 者 对 远程 对 象 进行 方法 调用 。 粒 度 较 大 的 面向 服务 架构 也 属于 这 一 类 型 。 对 于 这 一 类 型 ， 关 
键 的 问题 在 于 执行 的 是 何 种 操作 。 

而 另 一 方面 ，REST 的 核心 是 资源 。 有 时 REST 也 被 称 为 面向 资源 或 面向 文档 的 方式 。 它 所 允许 的 操 
作 就 只 有 对 资源 (文档 ) 的 更 新 ( 包含 了 创建 、 删 除 在 内 的 ， 广义 的 更 新 )。 这 是 一 种 很 强 的 限制 条 件 。 
不 过 ， 正 是 有 了 限制 条 件 ， 才 能 决定 一 种 架构 。 提 出 了 REST 的 这 篇 论文 的 关键 结论 是 ，REST 这 一 限制 
条 件 ， 是 Web 具有 可 扩 放 性 的 根基 。 

在 正确 理解 了 REST 之 后 ， 我 们 就 能 发 现 将 非 SOAP 的 类 型 称 为 REST 是 错误 的 。 如 果 非 要 将 分 布 
式 系统 分 为 两 种 类 型 那么 RPC 系 和 REST 系 这 样 的 术语 才 是 最 合理 且 恰 当 的 。 前 者 侧重 于 操作 ， 而 后 
者 则 侧重 于 资源 的 更 新 。 对 于 通过 非 SOAP 来 描述 REST 的 情况 ， 可 以 将 其 理解 为 ， 选 择 了 SOAP 这 一 
RPC 系 中 的 代表 类 型 来 说 明 。 

围 SOAP 与 REST 

从 实际 使 用 方式 上 对 SOAP 与 REST 做 比较 的 话 ， 会 发 现 两 者 最 大 的 区 别 在 于 URL 的 命名 风格 。 
SOAP 的 URL 命名 是 与 操作 相对 应 的 。 因 此 ，URL 的 命名 是 动词 风格 的 。 以 面向 对 象 的 方式 将 对 象 名 与 
操作 名 相 结合 之 后 ， 得 到 的 URL 是 名 词 与 动词 的 组 合 。 

另外 ，REST 的 URL 命名 是 与 资源 相对 应 的 。 因 此 ，URL 的 命名 是 名 词 风 格 的 。 在 URL 中 没有 动词 ， 
因为 动词 已 经 通过 HTTP 的 GET 或 POST 进行 指定 。 正 因 如 此 ， 也 有 人 将 RESTful API 理解 为 一 种 URL 的 
命名 风格 。 这 种 观点 有 些 狭隘 ， 不 过 从 实际 使 用 的 角度 来 看 ， 也 是 一 种 对 RESTful 的 妥当 的 定义 。 

有 很 多 Web API 既 没有 遵循 SOAP 风格 ， 也 没有 遵循 REST 风格 。 不 过 在 实际 中 ， 一 种 Web API 即 
使 没有 遵循 REST 风格 ， 只 要 它 不 是 SOAP， 也 会 被 命名 为 RESTful API。SOAP 这 一 标准 标准 庞大 有 日 复 
杂 ， 非 常规 整 ， 而 与 之 相对 的 RESTful 则 被 认为 是 其 对 立 面 。 这 是 上 述 情况 产生 的 深层 原因 之 一 。 因 此 ， 
对 于 很 多 Web API 来 说 ， 只 要 它 不 是 SOAP 风格 ,那么 无 论 有 没有 遵循 REST 的 URL 命名 风格 ， 都 会 自 
称 为 RESTful API。 


国 19.3.4 API 客 角 | 


一 些 Web 服务 会 发 行 一 种 被 称 为 API 密 钥 的 密 钥 ， 以 使 用 其 Web API。 在 使 用 Web API 时 ， 需 要 提 
交 API 密 钥 。 从 HTTP 级 别 来 看 ， 就 是 在 发 送 请 求 时 通过 查询 参数 来 传递 API 密 钥 ， 服 务 器 断 将 检查 其 
值 。API 密 钥 的 主要 作用 如 下 所 示 。 

@ 使 用 限制 ( API 的 调用 次 数 等 ) @ ( 将 来 可 能 的 ) 收费 
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如 今 很 多 的 Web API 都 有 使 用 限制 。 不 过 ， 据 笔者 所 知 ， 目 前 还 没有 收费 的 Web API。 因 此 , 习 
上 API 密 钥 是 免费 的 。 虽 然 也 有 些 服务 通过 与 邮件 地 址 相关 联 来 制约 API 密 钥 无 限制 的 发 行 ， 但 也 不 
什么 严格 的 限制 。 

由 于 这 样 的 背景 ， 如 果 将 现在 的 API 密 钥 理解 为 机 密 信息 ， 也 不 是 很 合适 。 要 是 窃取 了 API 密 钥 并 
随意 使 用 的 话 ， 就 会 引发 使 用 限制 ， 于 是 自己 的 程序 可 能 会 无 法 再 调用 Web API。 话 虽 如 此 ， 这 样 的 情 
况 也 没有 什么 经 济 损失 ， 最 多 是 让 人 恼火 而 已 。 

API 密 钥 是 否 需 要 加 密 ， 对 于 客户 端 JavaScript 来 说 具有 重要 意义 。 这 是 因为 ,理论 上 ， 在 客户 端 
JavaScript 中 使 用 Web API 时 ， 无 法 对 API 密 钥 加 密 。 

因为 通常 API 密 钥 都 会 被 写 在 JavaScript 代码 中 ， 所 以 用 户 很 容易 就 可 以 通过 浏览 器 对 其 进行 读 取 。 
即使 花 功夫 对 JavaScript 代码 进行 了 混淆 处理 ， 只 要 用 户 能 通过 浏览 器 调用 Web API， 就 能 够 轻松 地 获知 
HTTP 通信 的 情况 。 因 此 ， 如 果 有 必要 对 API 密 钥 加 密 ， 则 不 能 以 客户 端 JavaScript 来 调用 Web API。 
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如 果 Web API 获取 的 是 任何 人 都 可 以 阅读 的 文档 ， 则 不 必 进 行 用 户 验 证 。 不 过 ， 如 果 Web API 会 对 
文档 进行 更 新 ， 或 者 获取 的 是 具有 访问 限制 的 文档 的 话 ， 就 有 必要 进行 用 户 验证 。 
图 用 户 验证 机 制 

为 了 理解 Web API 的 用 户 验证 ， 我 们 首先 要 说 明 依稀 通常 的 Web 应 用 中 的 用 户 验证 机 制 。 归 根 结 
底 ，Web 应 用 的 用 户 验证 机 制 是 一 种 会 话 管理 。 如 果 直 截 了 当地 对 Web 应 用 会 话 管理 的 定义 进行 说 明 ， 
可 以 说 这 是 一 种 用 于 判断 HTTP 请 求 是 由 谁 发 送 的 机 制 。 对 于 HTTP 这 一 通信 协议 来 说 ，1 次 请 求 与 1 
次 相应 组 成 了 一 个 单位 。 即 使 是 同一 个 用 户 通过 同一 个 浏览 器 向 同一 个 服务 器 发 送 了 请 求 ， 这 一 请 求 
(在 原则 上 ) 与 其 前 一 个 请 求 之 间 也 不 会 有 相关 性 。 因 此 ， 为 了 识别 出 由 同一 个 用 户 发 出 的 请 求 ， 需 要 对 
会 话 进行 管理 。 

对 于 每 一 个 独立 的 HITP 请 求 而 言 ， 需 要 对 发 送 者 相同 的 请 求 添加 标记 。 基 于 这 些 标记 ， 服 务 器 端 
就 能 判断 请 求 的 发 送 者 。 可 以 将 Cookie 或 特殊 的 查询 参数 用 作 区 分 请 求 的 标记 。 

在 Web 应 用 的 服务 器 端 以 用 户 为 单位 所 保存 的 状态 被 称 为 会 话 。 通 过 在 会 话 中 保存 用 户 的 信息 ， 就 
能 够 根据 相应 的 用 户 来 返回 响应 。 
转 Cookie 与 会 话 管理 

这 里 略 去 对 使 用 查询 参数 的 方式 的 说 明 ， 仅 对 Cookie 进行 说 明 。Cookie 实际 上 是 名 为 Cookie 的 
HTTP 请 求 头 部 信息 。Cookie 头 部 信息 与 其 他 的 请 求 头 部 信息 的 不 同 之 处 在 于 ，( 支持 Cookie ) 的 浏览 
将 会 把 Cookie 头 部 信息 的 值 保 存在 本 地 。 

浏览 器 将 会 记忆 接收 自 服务 器 的 Cookie 值 ， 如 果 请 求 是 发 送 给 同一 个 服务 器 的 ， 所 保存 的 Cookie 
值 就 会 被 添加 至 请 求 中 "。Web 应 用 将 会 引用 所 收 到 的 Cookie 头 部 信息 ,以 判断 该 请 求 是 来 自 于 哪 一 个 浏 
览 器 的 。 

Cookie 只 能 区 分 是 否 是 同一 个 浏览 器 ， 对 于 不 同 的 用 户 使 用 了 同一 个 浏览 器 的 情况 是 无 法 分 辨 的 。 
在 企业 或 学 校 中 ， 这 已 经 是 相当 危险 了 ， 如 果 是 网 吧 这 样 的 同一 台电 脑 会 有 大 量 不 固定 的 用 户 的 情况 ， 则 
会 有 致命 的 安全 风险 。 而 且 ， 如 果 Cookie 头 部 信息 的 值 成 为 了 用 于 个 人 识别 的 重要 依据 ，Cookie 值 将 会 是 
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及 务 器 会 通过 发 送 至 客户 端的 Set-Cookie 响应 头 部 信息 来 传送 Cookie 值 。 虽然 也 可 以 通过 JavaScript 来 生成 Cookie 值 ， 
不 过 通常 在 会 话 管理 中 不 会 这 么 做 。 
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息 。 然 而 在 普通 的 浏览 器 中 ,保存 于 本 地 的 Cookie 值 并 没有 严格 的 保护 功能 。 
在 Cookie 值 中 加 入 了 Web 应 用 所 发 布 的 会 话 太 。 会 话 卫 起 到 的 是 获取 Web 
应 用 的 会 话 信 息 的 密 钥 的 作用 。 会 话 卫 通常 是 基于 乱 数 生成 的 值 ， 本 身 并 没有 什么 意义 。 在 用 户 登 出 
Web 应 用 时 ， 或 者 用 户 在 一 定时 间 内 没有 发 出 请 求 时 ，Web 应 用 就 会 清除 会 话 ID 。 通 过 限定 Web 应 用 
会 话 ID 的 有 效 时 间 ， 就 能 够 减少 Cookie 值 ， 即 会 话 ID 被 盗 时 的 风险 。 有 效 期 限 被 称 为 
“会 话 超时 时 间 ”。 
总 结 来 说 ， 本 身 不 具有 含义 的 会 
哪 一 个 服务 器 传递 哪 一 个 Cookie 值 进行 管理 ，Web 应 用 会 对 
行 管理 。 两 者 通过 这 样 的 状态 管理 ， 实 现 了 对 Web 应 用 的 用 
图 Cookie 的 有 效 期 限 
同时 ， 还 存在 会 话 Cookie 这 一 容易 引起 混淆 的 术语 。 这 一 术语 和 Web 应 用 中 的 会 
它 表示 的 是 浏览 絮 的 启动 状态 。 没 有 明确 指定 有 效 期 限 的 Cookie 的 有 效 期 仅 限 于 浏览 絮 进 程 存在 的 光 
内 。 也 就 是 说 ,一旦 浏览 器 关闭 ，Cookie 就 无 效 了 。 
而 在 指定 了 Cookie 的 有 效 期 限 后 ， 它 就 会 被 保存 在 浏览 器 所 在 的 本 地 磁盘 中 ， 
Cookie 也 有 效 。 前 面 那 样 的 随 着 浏览 器 进程 的 结束 而 失效 的 Cookie 俗称 为 会 话 Cookie。 
消 ， 还 请 加 以 注意 。 


国 19.4.2 会 话 管理 与 用 户 验证 


下 面 通过 图 片 来 说 明 ， 
会 话 未 被 管理 的 用 户 在 访问 需要 登录 的 Web 应 
ID 与 密码 。 

Web 应 用 在 接收 了 用 户 ID 与 密码 之 后 ， 会 通过 内 部 的 数据 库 或 目录 验证 密码 。 如 果 验 证 成 功 ， 就 会 











一 种 比 密码 更 为 机 密 的 信息 
为 了 防范 这 一 风险 ， 
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HA 


话 ID 被 作 Cookie， 在 浏览 器 与 Web 应 
所 接收 到 的 ID 所 能 引用 的 


户 登 录 状 态 进行 管理 。 


























之 间 传 递 。 浏 览 器 将 对 向 


会 话 信 息 进 进 




































































话 并 没有 关系 ， 
已 转 








A 
所 





























在 浏览 器 重启 后 
这 很 容易 引起 混 


图 19.2 )。 甚 
面 输入 用 户 




















] 的 用 户 验 证 的 一 般 流程 ( 
出 现 登 陆 画面 。 用 户 需要 在 登陆 画 


通过 Cookie 和 会 话 管理 进行 Web 应 
时 ， 将 会 







































































































































































创建 用 于 管理 登录 状态 的 会 话 ， 并 将 会 话 ID 作为 Cookie 值 返回 。 
之 后 ， 在 Cookie 的 有 效 期 限 及 会 话 的 有 效 期 限 内 ， 用 户 就 将 处 于 Web 应 用 的 登录 状态 

上 图 19.2 通过 Cookie 进行 会 话 管理 的 概念 图 

浏览 器 请 求 Web 服务 器 

人 登陆 界面 洒 

HTML 
密码 (post) 户 验 证 ( 密码 验证 ) 
验证 成 功 
A 会 话 ID 
响应 Set-Cookie: 会 话 ID 
会 话 ID 表 维 证 确认 
请 求 Cookie: 会 话 ID 会 话 ID 
Cm ms 




















tb 重要 的 规则 。 即 





之 外 ， 





除了 下 一 节 中 将 要 考虑 的 Web API 与 Cookie 的 使 用 规则 还 需要 记 住 一 
Cookie 仅 能 够 被 发 送 至 其 发 布 者 的 Web 应 用 。 


浏览 器 会 将 Cookie 发 送 至 Cookie 发 布 者 的 Web 服务 器 中 ， 对 于 发 送 至 其 他 Web 服务 器 的 请 求 ， 则 











不 会 发 送 该 Cookie 。 这 一 限 





中 ”严格 来 说 ， 还 是 可 以 对 一 些 细 节 
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判 与 跨 源 限制 相 类 似 , 不 过 , 跨 





节 进 行 控制 的 ， 不 过 从 整体 上 来 看 ， 


跨 源 限制 尚且 有 





只 要 这 样 理 


些 回避 方法 ， 而 Cookie 值 则 完 
解 就 没有 问题 了 。 
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接着 上 一 节 的 内 容 ， 





还 很 混乱 ， 





Provider，SP )， 将 使 用 了 Web API 的 应 用 称 为 第 三 方 应 | 
七 本 上 ， 可 以 将 服务 提供 者 认为 是 Google 、Facebook 或 Twitter 等 保存 有 大 量 
了 由 这 些 服务 提供 者 所 提供 的 Web API 的 Web 应 用 
三 方 应 用 。 























三 方 应 用 则 是 使 




















通过 浏览 器 访问 并 使 用 第 三 


全 不 可 能 被 发 送 至 其 他 的 服务 器 。 


国 19.4.3 ”Web API 与 权限 





第 19 章 Web AP| 的 基础 





我 们 再 来 考虑 一 下 Web API 与 用 户 验 证 的 问题 。 
API 的 服务 器 、 使 用 了 Web API 的 应 















































j， 以 及 在 浏览 器 中 访问 该 应 用 的 


目前 还 不 存在 完全 统一 的 命名 。 在 本 书 中 ,， 】 
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在 使 用 Web API 时 ， 存 在 Web 


















































户 这 三 者 。 对 于 这 些 术语 的 说 明 
各 提供 Web API 的 服务 器 称 为 服务 提供 者 ( Service 
] ， 将 对 浏览 器 进行 操作 的 使 用 者 称 为 用 户 。 
































] 户 账户 的 服务 。 第 





mn 

















] 户 持 有 服务 提供 者 的 账户 ,并 
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第 三 方 应 用 在 使 用 服务 提供 者 的 Web API 时 ， 可 以 分 为 通过 服务 器 端 调 用 及 通过 客户 端 调 用 这 两 种 
E 式 。 其 流程 分 别 如 下 图 所 示 (图 19.3 与 
园 服务 器 端的 Web API 调用 及 其 权限 


图 19.4 )。 


在 通过 服务 器 端 调 用 Web API 时 ， 由 于 没有 跨 源 限制 等 麻烦 的 问题 ， 


客户 端 调用 Web API 相 比 ， 这 时 ， 服 务 带 充当 ] 
可 能 会 有 丢失 响应 的 风险 。 同 时 ， 由 于 Web API 


领 。 不 过 ， 
合 考虑 所 有 这 些 情 况 ， 通 
在 通过 服务 器 端 调 



















































































因此 实现 起 来 较为 容易 。 与 从 





用 户 调用 Web API 时 的 














过 Web API 调用 者 的 权限 。 












































三 方 应 用 ， 由 第 三 方 应 | 
为 了 解决 这 一 问题 ， 























的 第 三 方 应 用 ， 将 会 通过 


| 














‖ 图 19.3 通过 服务 器 端 调用 Web API 





户 需 要 将 其 在 服务 
] 以 模拟 的 形式 登录 服务 提供 者 。 这 虽然 也 是 一 种 解决 方案 ， 却 不 够 安全 。 
出 现 了 OAuth 这 一 授权 协议 ， 本 节 接 下 来 将 对 其 进行 说 明 。 从 
] 户 的 权限 对 服务 提供 者 的 Web API 进行 调用 。 



































四 响应 





6 ~ 二 


be 

















第 三 方 应 





中 请 求 > 
> 一 一 并 


服务 提供 者 


Web API 








转 客户 端的 Web API 调用 及 其 权限 











在 通过 客户 端 JavaScript 调用 























如 图 19.4 所 示 ， 在 调 / 
用 时 的 情况 不 同 ， 该 请 求 中 包含 了 与 














Web API 时 ， 同 样 有 一 些 与 权限 相关 
] Web API 时 ， 浏 览 嚣 将 会 发 送 HTTP 请 求 给 服务 提供 者 。 




















] 户 在 服务 提供 者 上 的 登录 信息 相关 的 Cookie。 


EE 
结果 ， 


P 转 站 。 由 于 是 中 转 处 理 ， 因 此 





的 调用 处 理 被 集中 于 服务 器 ， 因 此 还 可 能 会 出 现 性 能 瓶 

这 种 方式 也 有 一 些 优 点 ， 比 如 可 以 缓存 相同 Web API 的 调用 

过 服务 器 调用 或 许 是 一 种 更 有 效率 的 方式 。 

] Web API 时 ， 需 要 考 

提供 者 提供 的 账户 ， 以 该 账户 所 具有 的 权 

送 至 其 发 布 者 的 服务 器 。 因 此 ， 与 服务 提供 者 的 登录 状态 相关 
在 OAuth 或 类 似 的 协议 出 现 之 前 ， 用 

















还 可 以 整合 调用 过 程 。 综 














理想 的 情况 是 ， 





] 户 通过 服务 





用 Web API。 不过， 正如 前 一 节 中 所 讲 ，Cookie 只 能 被 发 
的 Cookie 无 法 被 发 送 至 第 三 方 应 用 。 
提供 者 上 的 账户 ( 

















用 户 ID 及 密码 ) 告诉 第 














j 户 处 获得 授权 








的 问题 ， 不 过 这 时 的 情况 稍 有 不 同 。 


与 通过 服务 占 端 调 
乍 一 看 ， 这 样 就 避 





免 了 权限 问题 ， 但 可 惜 的 是 ， 这 时 仍然 存在 着 问题 。 这 一 问题 我 将 在 之 后 的 CSRF 中 进行 说 明 ， 而 该 问 
题 的 解决 方法 将 在 OAuth 中 进行 说 明 。 
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| 图 19.4 通过 客 


户 端 调用 Web API 
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(3 请 求 
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户 浏览 器 二 一 
sc Web AP 
avaScrip @ 响 应 
ee 


中 请 求 


HTML 
JavaScript C@) 响 应 


服务 提供 者 





了 用 


第 三 方 应 























国 CSRF 














在 用 户 完成 了 服务 提供 者 的 登录 之 后 ， 浏 览 器 向 服务 提供 者 发 送 的 HTTP 请 求 就 会 变 成 已 登录 的 状 








态 。 和 在 一 看 ， 如 图 19.4， 通 过 客户 端 调 
是 一 个 安全 漏洞 。 

这 是 因为 ， 举 个 极端 的 例子 来 说 ,， 勾 
页 面 ， 就 能 在 不 知 不 觉 中 随意 执行 文档 


















































的 攻击 方式 。 如 果 存 在 这 样 的 Web APTI， 


许可 ， 才 是 授权 机 制 应 有 的 功能 。 为 了 实现 这 一 
户 代理 流程 。 


| 除 操作 。 这 是 一 种 被 称 为 CSRD 











] Web API 的 方式 ， 解决 了 用 户 验 证 的 问题 。 但 事实 上 ， 这 其 实 


上 果 Web API 提供 了 文档 创建 或 文档 删除 的 功能 ， 只 要 打开 Web 


( Cross-Site Request Forgeries ) 


将 会 是 一 种 致命 的 安全 隐患 。 对 用 户 调 用 Web API 的 请 求 进行 























类 19.4.4 验证 与 授权 


在 说 明 OAuth 的 授权 机 制 之 前 ， 我 们 首先 整理 一 下 验证 (authentication ) 与 授权 ( authorization ) 相 
关 的 术语 。 这 些 术 语 比 较 容易 混淆 ， 因 此 ， 表 19.2 对 其 进行 了 总 结 。 





表 19.2 验证 与 授权 














目的 ， 我们 可 以 采用 之 后 将 会 介绍 


的 OAuth 2.0 这 一 用 












































验证 为 了 对 身份 进行 判断 ， 而 对 个 人 或 进程 所 提供 的 资格 信息 进行 验证 
授权 将 可 以 执行 某 些 操作 ， 或 者 可 以 使 用 某 些 位 置 的 权限 授予 给 个 人 














Web 应 用 中 的 验证 实际 上 指 的 是 登录 处 理 。 在 输入 了 用 户 ID 及 密码 之 后 ， 
也 就 是 说 ， 这 里 假定 只 有 本 人 知道 这 一 机 密 信 息 。 
例如 生物 验证 或 密 钥 验证 公 钥 


只 有 本 人 才 知 道 的 机 密 信息 。 
































除了 密码 ， 还 有 一 些 其 他 的 只 有 本 人 才 知 道 (或 拥有 ) 的 机 密 信息 ， 
验证 (PKI 验证 ) 等 。 不 过 对 于 Web 应 用 来 说 ， 密 码 验 证 是 事实 上 的 标准 。 如 前 节 所 述 ， 在 登录 过 程 中 ， 














是 通过 以 Cookie 发 送 会 话 ID 的 方式 来 进行 
授权 则 决定 了 用 户 在 登录 之 后 可 以 进行 哪些 操作 。 人 例如， 改写 自己 所 创 如 
































就 能 够 登录 系统 。 密 码 是 

















所 创建 的 文档 的 权限 ， 以 及 向 文档 中 添加 注释 的 权限 等 。 
以 上 这 些 对 验证 与 授权 的 说 明 ， 只 有 在 某 个 Web 应 用 ( 服务 ) 与 用 户 
才 有 意义 。 前 一 节 一 开始 也 提 到 过 ， 在 Web API 的 使 用 过 程 中 ,含有 服务 提供 者 、 





者 。 对 于 这 三 者 之 间 的 验证 与 授权 ， 





























] 户 验证 的 。 即 会 话 卫 起 到 了 临时 机 密 信息 的 作用 。 
的 文档 的 权限 、 读 取 他 人 




















系统 /协议 或 分 布 式 授权 系统 /协议 。 
分 布 式 验证 的 例子 有 OpenID， 分 布 式 授权 的 例子 有 OAuth。 在 Web API 领域 ， 


发 挥 越 来 越 重 要 的 作 
































需要 有 为 一 种 类 似 于 权限 委托 的 机 制 。 


]， 本 章 接 下 来 将 对 OAuth 进行 说 明 。 
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之 间 ， 是 





这 一 机 
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对 一 处 理 的 前 提 下 


第 三 方 应 用 与 用 户 三 
制 被 称 为 分 布 式 验证 








分 布 式 授权 系统 正在 
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国 19.4.5 OAuth | 


关于 OAuth 的 详细 信息 ， 请 参见 下 面 的 URL。IETF 正在 制订 OAuth 2.0 的 标准 ， 现 在 已 经 有 一 部 分 
Web API 对 OAuth 2.0 提供 了 支持 。 
http://oauth.net 


OAnuth 是 一 种 授权 传递 协议 。 也 就 是 说 ， 这 一 协议 标准 的 作用 是 将 在 服务 A 中 授予 的 权限 传递 给 服 
务 B。 有 时 OAuth 也 被 称 为 验证 协议 或 授权 协议 ， 不 过 这 种 称 法 可 能 会 引起 混淆 。 如 果 将 其 称 为 验证 协 
议 ， 则 可 能 让 人 误 以 为 它 是 一 种 类 似 于 BASIC 验证 或 表单 验证 等 的 协议 ， 需 要 通过 发 送 用 户 ID 及 密码 
来 进行 。OAuth 是 对 已 授权 的 权限 的 转让 。 因 此 ， 称 为 权限 转让 协议 也 没有 问题 。 

用 Web API 领域 的 术语 来 说 的 话 ，OAnuth 的 作用 是 将 服务 提供 者 中 的 用 户 权 限 ( 创建 文档 或 添加 注 
释 等 ) 转让 给 第 三 方 应 用 。 这 时 ， 不 必 将 用 户 与 服务 提供 者 之 间 的 机 密 信息 ( 密码 及 会 话 了 D 的 Cookie 
值 ) 传递 给 第 三 方 应 用 ， 就 能 实现 权限 的 转让 。 除 了 OAuth， 也 有 其 他 一 些 类 似 的 自 定义 协议 ， 用 于 转 
让 权限 。 不 过 OAuth 2.0 正 渐渐 成 为 Web API 领域 的 主流 。 
通常 来 说 ，OAuth 被 用 于 图 19.3 这 样 的 ， 从 服务 器 端 调用 Web API 的 情况 。 不 过 在 OAuth 2.0 中 增 
加 了 新 的 用 户 代 理 流程 ， 在 图 19.4 这 样 的 客户 端 JavaScript 中 也 能 使 用 。 
国 OAuth 2.0 的 服务 器 端 流程 
首先 对 通常 的 OAuth 流程 进行 说 明 。 图 19.3 中 的 基本 场景 为 ， 第 三 方 应 用 通过 用 户 的 权限 来 调用 服 
务 提供 者 的 Web API。 这 时 ， 其 内 部 的 通信 协议 概况 如 图 19.5 所 示 。 


| 图 19.5 ”OAuth 2.0 的 流程 


a 第 三 方 应 


ER ey We Ap | 
1 
重 定向 至 服务 提供 者 形 
六 


限 转让 的 请 求 通过 查询 参数 ， 第 三 方 应 服务 提供 者 ( SP ) 
事先 ) 登录 的 应 用 ID 传递 给 SP ) A 
HE 
浏览 器 LD 如 果 用 户 没有 登录 SP， 则 返回 登录 
登录 界面 如 果 已 经 登录 ， 现 返 加 权限 村 让 的 确认 界 于 
登录 ( POST 用 户 ID 及 密码 ) 














































































































































































































































































































































































































返回 权限 转让 的 确认 界 再 













































































于 授权 该 权限 转让 的 POST 在 内 部 生成 
授权 代码 
重 定向 至 第 三 方 应 
请 求 ( 在 重 定 向 URL 的 查询 参数 中 添加 授权 代码 ) 











( 查询 参数 中 含有 授权 代码 ) 发 送 至 SP 的 请 求 
(查询 参数 中 含有 授权 代码 及 
站 从 SP 处 (事先 ) 取得 的 密 钥 ) 验证 授权 代码 ， 
员 ee 
一 一 一 一 一 一 re 问 令 
含有 访问 令 牌 的 响 绍 

至 此 ， 权 限 转让 的 准备 工作 已 经 完成 ， 接 下 来 进行 用 于 转让 权限 的 处 理 

第 三 方 应 用 对 Web API 处 理 






































































































进行 必要 的 请 求 Web API | 查询 参数 中 
含有 访问 令 牌 
1 oi! 以 用 户 的 权限 
[ee 执行 Web API 
第 三 方 应 用 对 Web AP| 处 理 Web API 响应 
进行 必要 的 响应 
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OAuth 的 详细 信息 可 以 在 其 标准 书 或 相关 的 专业 书籍 中 找到 。 图 19.5 中 的 流程 的 目的 很 明确 ， 就 是 
为 了 获取 访问 令 牌 。 所 谓 访问 令 牌 ， 是 一 种 具有 时 效 限制 的 机 密 信 息 的 替代 品 。 在 调用 具有 访问 令 牌 的 
Web API 时 (通常 是 在 调用 Web API 时 ， 通 过 HTTP 查询 参数 来 传递 令 牌 的 )， 将 会 以 服务 提供 者 中 的 用 
户 账户 所 具有 的 权限 来 执行 操作 。 

国 OAuth 2.0 的 用 户 代 理 流 程 

本 章 的 主题 是 客户 端 JavaScipt， 如 果 要 通过 客户 端 JavaScript 来 调用 Web API ( 图 19.4 )， 则 可 以 使 
用 OAuth 2.0 的 用 户 代 理 流程 (在 现在 的 OAuth 2.0 标准 中 ， 它 被 称 为 隐 式 授权 )。 此 时 ， 其 内 部 通信 协 
议 的 概况 如 图 19.6 所 示 。 

与 图 19.5 不 同 的 是 ， 这 种 情况 下 第 三 方 应 用 (服务 器 端 ) 没有 与 服务 提供 者 进行 通信 。 如 果 用 户 与 
服务 提供 者 之 间 的 HTTP 通信 处 于 登录 状态 ， 就 会 通过 Cookie 进行 会 话 管理 ， 对 此 请 加 以 注意 。 图 19.6 
中 的 通信 的 目的 也 是 为 了 获取 访问 令 牌 。 该 访问 令 牌 的 作用 与 图 19.5 中 的 相同 。 


| 图 19.6 OAuth 2.0 的 用 户 代理 流程 


户 第 三 方 应 




















































































































































































































HTML- 包含 了 Web API 所 必需 的 JavaScript 处 理 的 HTML 省 
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服务 提供 者 ( SP ) 





























请 求 权 限 转让 的 请 求 ( 通过 查询 参数 ， 第 三 方 应 用 将 已 ( 事先 ) 
登录 的 应 用 ID 传递 给 SP ) 





















































































































































< 
浏览 HTME 和 如 果 用 户 没有 登录 SP， 则 返回 登录 界 画 
登录 界 如 果 已 经 登录 ， 则 返回 权限 转让 的 确认 界 本 
登录 ( POST 用 户 ID 及 密码 ) 
起 会 话 管理 
浏览 器 的 权限 HTME > 返回 权限 转让 的 确认 界 下 Cookie: 会 话 ID 
转让 确认 界面 





























受权 该 权限 转让 的 POST 在 内 部 验证 授权 代 
码 ， 如 果 已 授权 ， 则 


> 
DE 
发 布 访问 令 牌 


重 定向 至 第 三 方 应 
在 URI 哈 希 片 段 中 包含 了 访问 令 牌 ( 例 : /callback#access-token ) 


人 
< 和 : 
JS 通过 客户 端 JavaScript 分 析 URI 哈 希 片段 ， 
以 获取 访问 令 牌 
至 此 ， 权 限 转让 的 准备 工作 已 经 完成 ， 接 下 来 进行 用 于 转让 权限 的 处 理 


通过 跨 域 通信 调用 Web AP 
( 查询 参数 中 含有 访问 令 牌 
> Web API a 

以 用 户 的 权限 执行 Web API 


Web API 响应 






































































































































图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 





第 20 章 Web API 的 实例 





Web API 的 实例 








本 章 将 介绍 Web API 的 实例 。 最 近 ， 主 流 的 Web 应 用 都 提供 了 Web API， 构 建 第 三 方 应 用 及 
其 软件 生态 环境 也 成 为 了 一 种 常 ee. 之 后 我 们 将 通过 一 些 实例 ， 来 感受 一 下 Web API 的 
共性 并 思考 其 未 来 可 能 的 发 展 方向 。 


| 20.1 | Web API 的 分 类 


下 面 是 一 张 具有 代表 性 的 Web API 的 分 类 , 引 自 ProgrammableWeb” ( 表 20.1 )。 通过 它 , 我 们 可 以 对 
Web API 的 实际 情况 有 一 个 把 握 。 这 份 分 类 能 反映 的 不 过 是 当前 的 Web API 的 情况 “。 在 Web 中 充满 了 可 
能 , 或许 在 今后 还 会 出 现 现 在 所 没有 的 新 的 类 型 。 因 此 ， 不 要 认为 表 20.1 列 出 的 就 是 Web API 所 有 的 应 
用 实例 了 “。 


表 20.1 ProgrammableWeb 的 分 类 摘要 














































































































































































































































































































分 类 说 明 
Advertising 广告 。Google 最 强 
Answers 社会 化 问答 。Stack Overflow 与 Quora 等 正在 追赶 Yahoo Answers 
Blog Search 博客 搜索 。 在 Technorati 之 后 不 再 那么 热门 
Blogging 博客 。 由 于 被 Twitter 压制 ， 而 不 再 那么 热门 
Bookmarks 社会 化 书签 。 在 del.icio.us 之 后 不 再 那么 热门 
Calendar 日 历 。Google Calendar 最 强 
Chat 禾 天 。 由 于 被 Twitter、Facebook 压制 ， 而 不 再 那么 热门 
Database 数据 库 。 可 以 将 NoSQL 这 类 RDB 的 CURD 操作 转化 为 REST 操作 等 
Dictionary 了 
Email Web 邮件 
Enterprise salesforce.com 最 强 
Events 区 域 事件 分 享 。Eventful 与 Upcoming.org 为 最 强 的 两 家 
Feeds 消息 来 源 
File Sharing 在 线 文件 共享 
Financial 投票 信息 、 外 汇 汇率 等 
Food 餐厅 搜索 等 
Games 游戏 。 在 SecondLife 之 后 不 再 那么 热门 
nternet 其 实 这 一 分 类 指 的 是 其 他 类 型 。 诸 如 Amazon EC2 等 
Job Search 求职 搜索 
apping 也 图 。Google Maps 最 强 
edia Management BBC 的 归档 功能 为 其 中 一 强 
QD http://www.programmableweb.com/ 





@@ 这 份 分 类 是 基于 美国 的 互联 网 现状 总 结 出 来 的 ， 和 国 
@ 表 20.1 的 说 明 包 含 了 执笔 本 书 时 笔者 自己 的 一 些 感想 . 





译 者 注 


图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 


323 @ 


@@ 324 一 一 一 第 5 部 分 Web API 
































( 续 ) 

分 类 说 明 

essaging 消息 收发 。 诸 如 411Sync 等 

usic Last.fm 最 强 

ews 诸如 Digg 及 Reddit 等 
Office 诸如 Google Docs、SlideShare、Zoho 等 
Payment PayPal 为 其 中 一 强 
Photos 照片 分 享 。Flickr 最 强 ，TwitPic、Smugmug、Instagram 紧 随 其 后 

















Project Management 


项 目 管理 。 诸 如 Basecamp 等 





Real Estate 


也 产 搜索 服务 。 诸 如 Zillow 等 





Recommendations 


推荐 搜索 服务 。 诸 如 Yelp 等 

























































































Reference 诸如 GeoNames 及 Wikipedia 等 

Search 鄙 素 。Google、Yahool 与 Bing 为 最 强 的 三 家 

Shipping FedEx 等 的 配送 服务 

Shopping 在 线 购物 。Amazon 与 eBay 是 最 大 的 两 强 ， 而 新 兴 的 Groupon 等 团购 服务 正在 与 其 激烈 竞 久 
Social 诸如 Twitter、Facebook、Foursquare、Linkedln、MySpace 等 
Storage 在 线 存储 。Amazon S3 是 最 领先 的 ， 此 外 还 有 Dropbox 等 新 兴 服 务 
Telephony 互联 网 电话 。Twilio、Skype 等 

Tools Google App Engine 等 

Utility Google Translate、Evernote 等 

Video YouTube 最 强 

Weather 天 气 预报 











20.2 | Google Translate API 























Google Translate API 是 一 种 翻译 Web API， 在 通过 该 API 发 送 文 本 之 后 ， 将 会 返回 翻译 后 的 文本 。 
由 于 它 的 功能 很 简单 ， 因 此 能 够 更 好 的 分 析 其 Web API 的 本 质 。 不 过 可 惜 的 是 ，Google Translate API 服 


务 今后 将 会 被 终止 "。 








虽然 Google Translate API 将 会 终止 提供 服务 ， 不 过 可 以 将 其 作为 基础 ， 对 其 他 的 Web API 进行 介绍 























与 说 明 。 与 Google Translate API 自身 的 用 法 相 比 ， 更 应 关注 其 作为 Web API 的 使 用 方式 。 








本 节 之 后 将 基于 Google Translate API v2 进行 说 明 。 大 家 可 以 通过 下 面 的 地 址 获取 API 的 参考 文档 。 


http://code.google.com/int/en/apis/language/translate/overview.html 


除了 Google Translate API， 还 有 另 一 个 名 为 Google Translate 的 Web 应 用 。 可 以 通过 下 面 的 URL 访问 。 


http://translate.google.com 





‘2 



































由 于 Google Translate API 所 提供 的 功能 和 其 Web 应 用 的 功能 基本 相同 ， 因 此 也 可 通过 前 一 章 介 绍 的 








Web 抓 取 方式 ， 对 HTTP 通信 及 HTML 进行 解析 ， 以 在 程序 中 对 其 进行 访问 。 

理论 上 也 能 够 开发 一 个 程序 ， 在 发 送 文 本 后 获取 翻译 结果 ， 不过， 这 种 方式 的 效率 不 会 很 高 ， 而 且 
有 可 能 在 HTML 的 结构 发 生 改变 时 无 法 正常 运行 。 其 实 所 实现 的 功能 相同 ,使 用 Web API 也 有 其 优势 。 
在 使 用 Web API 时 不 需要 随 Web 应 用 的 标准 调整 而 更 改 。 















































中 http://googlecode.blogspot.com/2011/05/spring—cleaning—for—some—of—our—apis.html 
@ 不 过 颇具 讽刺 意味 的 是 ， 如 果 API 的 提供 被 终止 ， 则 仍 会 受到 影响 。 当 然 ， 如 果 Web 应 用 被 关闭 ， 也 会 产生 这 一 问题 ， 
因此 这 也 算是 一 种 无 法 避免 的 风险 了 。 
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国 20.2.1 准备 | 

如 果 要 使 用 Google Translate API， 必 须 拥 有 Google 账户 。 在 获取 了 Google 账户 之 后 ， 需 要 登录 
Google 的 站 点 。 账 户 是 可 以 免费 获取 的 。 访 问 以 下 页 面 ， 就 能 够 进入 Google 所 提供 的 Web API 的 管理 
界面 。 

http://code.google.com/apis/console/ 

在 管理 界面 中 启用 Google Translate API 服务 之 后 ， 就 能 够 获取 其 API 密 钥 。API 密 钥 的 作用 是 限制 
每 天 调用 Web API 的 次 数 。Google 账户 是 免费 的 ， 几 乎 可 以 获取 无 限 多 个 账户 ， 所 以 这 也 算 不 上 严格 
的 限制 。 


故 20.2.2 执行 方式 的 概要 lL 
Google Translate API 的 基本 执行 方式 为 ， 向 下 面 的 URL 发 送 HTTP 请 求 ， 并 接收 JSON 形式 的 响应 。 







































































http://www.googleapis.com/language/translate/v2? 查询 参数 

URL 路 径 是 固定 的 ， 请 求 中 可 以 改变 的 只 有 查询 参数 部 分 。 与 函数 调用 相 比 ， 可 以 认为 URL 路 径 

就 相当 于 函数 名 ， 查 询 参数 则 是 参数 ， 而 响应 则 相当 于 函数 的 返回 值 。 对 于 只 听 说 过 Web API 这 个 词 而 

没有 实际 见 过 Web API 的 人 来 说 ， 当 发 现 它 其 实 如 此 简单 时 或 许 会 有 些 失 望 吧 。 最 基本 的 Web API 的 形 

式 确实 就 是 如 此 。 
在 Web API 的 标准 中 规定 了 可 以 使 用 的 查询 参数 名 。 只 要 掌握 了 表 20.2 中 所 列 的 查询 参数 ， 就 能 够 

对 其 进行 最 为 基本 的 使 用 了 。 更 详细 的 内 容 请 参见 其 他 参考 文档 。 
























































表 20.2 URL 的 查询 参数 

































































是 否 必 须 
q O 指定 需要 翻译 的 字符 串 
key O 指定 AP| 密 钥 
source X 设 定 所 要 翻译 的 原 字 符 串 的 语言 ( 如 果 没 有 指定 ， 则 会 自动 判断 ) 
target O 指定 希望 翻译 成 哪 种 语言 
callback X 旨 定 JSONP 所 需 的 回调 函数 ( 之 后 详 述 ) 


























在 通过 程序 调用 之 前 ， 请 先 直 接 通过 HTTP 方式 对 功能 进行 确认 。 可 以 通过 curl 指令 来 确认 其 执 
行情 况 。curl 是 可 以 在 命令 行 中 使 用 的 HITP 客户 端 工具 。 它 会 将 HTTP 请 求 发 送 至 参数 所 指定 的 请 求 
URL， 并 以 标准 方式 输出 HTTP 响应 。 

先 不 必 在 意 请 求 URL 的 路 径 、 参 数 及 API 密 钥 等 详细 信息 ， 只 要 关注 所 返回 的 响应 的 格式 即 可 (图 20.1 )。 
| 20.1 确认 Google Translate API 的 功能 

$ export APIKEY= 所 获取 的 API 密 钥 

# 参数 key、target 及 q 是 必需 的 ( 参数 source 可 以 被 省 略 ) 


$ curl "http://www.googleapis.com/language/translate/v2?key=$ {APIKEY}&q=I%$20found 
$20as20cat&target=zh-CN&source=en" 












































uaqaeaue 
veraneslorionsy: 


{ 
} 


"translatedText": "我 发 现 了 一 个 猫 。" 








QD 读者 可 能 会 觉得 这 和 句 话 不 太 通 顺 ， 不 过 ，Google Translate API 的 翻译 结果 确实 如 此 。 译 者 注 
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} 


图 20.1 中 的 响应 是 JSON 格式 的 (参见 第 2 部 分 7.2 节 )。 对 于 服务 器 端的 情况 ， 可 以 在 代码 中 对 
HTTP 通信 及 JSON 进行 分 析 ， 以 使 用 Google Translate API。 不 过 对 于 客户 端 JavaScript 的 情况 ， 则 会 产 
生 跨 源 限制 ， 无 法 直接 使 用 (参见 前 一 章 )。 但 Google Translate API 也 对 JSONP 提供 了 支持 ， 因 此 ， 能 
够 回避 跨 源 限制 这 一 问题 。 

支持 JSONP 的 Web API 如 果 要 接收 JSONP 格式 的 响应 ， 则 需要 使 用 特定 的 调用 方式 。 对 于 Google 
Translate API 来 说 ， 需 要 像 图 20.2 那样 将 callback 参数 传递 至 请 求 URL。callback 参数 的 值 所 指定 的 名 称 
将 被 作为 函数 名 ， 并 在 之 后 返回 一 个 JSONP 格式 的 响应 。 

在 很 多 支持 JSONP 的 Web API 中 都 使 用 了 callback 这 一 参数 名 称 ， 它 已 经 成 为 了 一 种 事实 上 的 标准 。 


| 图 20.2 在 请 求 中 使 用 JSONP 


$ export APIKEY= 所 获取 的 API 密 钥 
$ curl "http://www.googleapis.com/language/translate/v2?key=$ {APIKEY}&q=cat &target= 
zh-CN&source=eng&callback=myfunc" 
myfunc ({ 
"data": { 
eransdlac lionsy nl 































































































"translatedText": " 猫 " 


) 


国 20.2.3 使 用 了 Web API 的 代码 示例 | 


代码 清单 20.1 是 一 个 在 JavaScript 中 使 用 前 节 所 述 的 JSONP 的 示例 。_YOUR_APIKEY_ 部 分 需要 替 
换 为 所 获取 的 API 密 钥 。 

代码 清单 20.1 是 一 段 HTML 文件 的 片段 。 从 现在 起 ， 本 章 出 现 的 HTML 代码 都 将 只 是 片段 ， 对 此 
请 加 以 注意 。 在 代码 清单 20.1 中 ,为 了 更 清楚 的 体现 JSONP 的 执行 方式 ， 而 有 意 省 略 了 库 的 部 分 。 通 
常 ， 为 了 使 JSONP 能 正常 工作 ， 需 要 创建 script 标签 。 


| 代码 清单 20.1 ”使 用 了 JSONP 的 代码 示例 



































<SerlES 
// JSONP 的 回调 函数 
function translateText (response) { 
alert (response.data.translations[0] .translatedText); // 显示 翻译 结果 














function doTranslate() { 
var newScript = document .createElement ('script'); 
newScript.type = 'text/javascript'; 
Var sourceText = encodeURIComponent (document .getElementById ("sourceText") .value); 
var source = 'http://www.googleapis.com/language/translate/v2?key= YOUR APIKEY 
&source=engtarget=zh-CN&callback=translateText&q="' + SOurceText; 
newScript.src = source; 


// 为 了 能 够 调用 JSONP， 需 要 动态 创建 script 标签 
document .getElementsByTagName ('head') [0] .appendChild (newScript); 





ay/ 
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<inpue tye text rd soureernexteu /SS 
<div onclick="doTranslate()"> 翻译 </div> 


有 一 些 JavaScript 库 可 以 隐藏 SONP 的 调用 代码 ( 诸如 动态 创建 script 标签 等 操作 )。jQuery 就 是 其 









































之 一 。 代 码 清单 20.2 是 一 个 通过 jQuery 来 使 用 Google Translate API 的 代码 示例 。 


| 代码 清单 20.2 通过 jQuery 来 使 用 JSONP 的 代码 示例 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript"> 


function doTranslate() { 
$.ajax({ 
"Eve GE 
'url':'https://www.googleapis.com/language/translate/v2', 
data ta {key: YOURYADTRKEVEI oS (HtsoureeTmext eval argete zh eH } 
rdataType':'jsonp', // 将 数据 类 型 指定 为 JSONP 











'success':function(response) { // JSONP 的 回调 函数 
alert (response.data.translations[0] .translatedText); // 显示 翻译 结果 


} 





bp 
} 


Ey eu 
<input type="text" id="sourceText" /> 
<div onclick="doTranslate()"> 翻译 </div> 


Google Translate API 也 提供 了 用 于 JavaScript 语言 的 版 本 。 代 码 清单 20.3 是 其 使 用 示例 。 它 在 内 





























部 使 用 的 仍然 是 JSONP， 所 以 与 代码 清单 20.1 和 代码 清单 20.2 相 比 ， 其 实质 仅仅 是 隐藏 了 对 google. 
language.translate 的 函数 调用 而 已 。 


| 代码 清单 20.3 ”使 用 了 Google Translate JavaScript API 的 代码 示例 











<script src="https://www.google.com/jsapi?key= YOUR APIKEY "></script> 
<script type="text/javascript"> 
google.load("language", "1"); 


function doTranslate() { 
var text = document .getElementById("sourceText") .value; 


google.language.translate (text, 'en', 'zh-CN', 
function(result) { 
if (result.translation) { 
alert (result.translation); // 显示 翻译 结果 
) 


J 
} 


</eerines 
<input type="text" id="sourceText" /> 
<div onclick="doTranslate()"> 翻译 </div> 


国 20.2.4 微 件 ( Google Translate Element ) | 


本 节 最 后 介绍 一 下 Google Translate Element。 根 据 Google 的 定义 ，Google Translate Element 提供 的 是 一 








种 名 为 Web Elements 的 框架 。 可 以 通过 下 面 的 站 点 了 解 更 多 有 关 Web Elements 的 信息 。 本 书 认为 Web 
Elements 也 是 一 种 Web API。 




















http://www.google.com/webelements/ 


我 们 可 以 在 下 面 的 页 面 中 ， 以 会 话 的 形式 设 定 各 种 选项 ， 并 获得 HTML 代码 片段 。 


























中 Web Elements 在 2009 年 推出 ， 现 在 已 经 进行 了 一 些 调 整 。 目 前 可 以 在 http://www.google.com/ig/directory 页 面 中 找到 一 





些 范例 ， 但 不 排除 今后 进一步 调整 的 可 能 。 这 里 仅 作 为 对 Web API 的 一 种 补充 ， 做 一 下 简单 的 介绍 。 译 者 注 
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http://translate.google.com/translate_tools ， 


通过 该 页 面 获得 的 代码 片段 如 代码 清单 20.4 所 示 。 将 该 代码 片段 粘贴 至 HTML 中 ， 就 能 够 获得 图 
20.3 中 的 效果 。 


| 代码 清单 20.4 ”Google Translate Element 的 使 用 示例 











ES 

<div id="google translate element" style="display:block"></div> 

<SscrioEes> 

function googleTranslateElementInit() { 
new google.translate.TranslateElement ({pageLanguage: "en", includedLanguages: 'zh-CN'}, 
neooooleae ronsler enelemen wii 

/eeripes 

<script src="http://translate.google.com/translate a/element.js?cb=googleTranslate 

ElementInit"></script> 


| 图 20.3 Google Translate Element 的 显示 效果 








太 D 20-3.html x 八国 
3 CG 站 file://CVUsers/charles/Document 


百度 外 ALC a 日 本 Amazon 门 左右 分 栏 关 操 工 














加 








This is a cat. 
选择 语言 [| 
由 Google Google 翻译 强力 驱动 














Google Translate Element 相当 于 上 一 章 表 19.1 所 说 的 插件 式 API。 正 如 本 节 所 述 ，Goosgle Translate API 
包含 HITPAPI、 语 言 API 及 插件 API 这 三 种 类 型 。 这 是 一 种 典型 的 Web API 演进 模式 。 


20.3 |Google Maps API 


Google Maps 是 一 种 具有 代表 性 的 Web 应 用 , 也 是 一 种 典型 的 AJAX 式 混搭 应 用 ”。Google 提供 的 这 
一 Web API 可 以 在 各 种 Web 站 点 及 Web 应 用 中 被 使 用 。 

本 章 将 会 介绍 Google JavaScript Maps API ( 以 下 简称 为 Google Maps API )。 在 说 明 Google Maps API 
之 前 ， 本 节 将 先 介绍 以 下 两 个 概念 。 之 所 以 要 特地 对 其 进行 说 明 ， 是 因为 如 果 不 知 道 有 这 两 个 功能 ， 就 
很 可 能 会 使 用 Google Maps API 对 已 有 的 功能 重复 开发 。 

@ Google Static Maps API 

@ 我 的 地 图 






























































加 | 20.3.1 _ Google Static Maps API | 


在 使 用 Google Static Maps API 时 ,需要 遵循 指定 的 地 图 图 像 URL 规则 。 通 过 URL 查询 参数 ， 就 能 
定位 置 及 尺寸 。 把 下 面 这 样 的 HTML 代码 片段 插入 HTML 中 ， 就 能 够 在 界面 上 显示 地 图 。 其 结果 如 图 
20.4 所 示 。 











中 该 URL 已 更 新 为 https://translate.google.com/manager/website/。 译 者 注 
@ Web 2.0 中 的 混搭 指 的 是 整合 多 个 来 源 的 信息 或 Web API， 并 提供 一 体 化 服务 的 做 法 。 








译 者 注 
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<img src="http://maps.google.com/maps/api/staticmap?center=Tokyo&size=512*512&sensor=false" /> 


| 20.4 ”Google Static Maps API 的 结果 





staticmap (512x512) x 








a BB maps.google.com/maps/api/staticmap?center=Tokyo&size=512x512&sensor=false 




















上 面 只 是 一 个 硬 编码 的 img 标签 ， 完 全 没有 自由 度 。 不 过 ， 通 过 JavaScript 来 创建 img 标签 就 能 实 
现 地 图 的 动态 生成 。img 标签 和 script 标签 一 样 ， 没 有 跨 源 限制 ， 因 此 ， 这 种 方式 也 可 以 正常 运行 。 

代码 清单 20.5 是 一 个 通过 Google Static Maps API 创建 地 图 的 示例 ， 它 将 先 通过 Geolocation API 获 
取 当 前 位 置 ， 然 后 以 该 位 置 为 中 心 ， 创建 地 图 。 


| 代码 清单 20.5 动态 创建 Google Static Maps API 所 需 的 URL 








<script type="text/javascript"> 
navigator.geolocation.getCurrentPosition(function(pos) { 
varelare pos veoords la ue 


Var lng = pos.coords.longitude; 
var img = document .createElement ('img'); 
img.src = 'http://maps.google.com/maps/api/staticmap?center=' + lat + ',' 


+ lng + '&2Zo0m=14&size=512*512&sensor=true'; 
document .body .appendChild (img); 


ER 


Google Static Maps API 显示 的 仅 是 img 标签 形式 的 地 图 ， 无 法 使 用 Google Maps 所 特有 的 地 图 拖 放 等 
操作 。 虽 然 它 的 局 限 性 很 大 ， 不 过 反 过 来 也 限制 了 用 户 对 地 图 进行 操作 ， 所 以 也 有 其 适用 之 处 。 


国 20.3.2 我 的 地 图 lL 


如 图 20.5 所 示 ， 我 的 地 图 是 一 种 能 够 在 地 图 上 添加 标记 及 图 形 的 交互 式 Web 应 用 。 我 的 地 图 在 创建 
后 将 会 生成 唯一 的 URL， 可 以 在 任意 HTML 的 iframe 中 对 其 进行 引用 。 

我 的 地 图 所 具有 的 功能 ， 比 表面 上 所 显示 出 来 的 要 更 为 丰富 ， 且 仍然 在 不 断 改进 。 借 助 Google Maps 
API 辛苦 开发 出 的 Web 应 用 ， 有 可 能 只 是 我 的 地 图 的 一 个 粗糙 的 仿制 品 ， 因 此 ， 建 议 大 家 在 开发 前 ， 仔 
细 确 认 下 所 设想 的 功能 是 否 是 已 经 被 实现 了 的 。 
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上 图 20.5 我 的 地 图 
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| 
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加 20.3.3 ”Google Maps API 的 概要 | 


按照 前 一 章 表 19.1 的 分 类 方式 ，Google Maps API 仅 提供 了 JavaScript 语言 的 API， 而 没有 提供 提供 
HTTP API。 不 过 众所周知 ， 在 语言 API 的 内 部 使 用 的 仍 是 HITP 通信 ( 也 就 是 说 ， 其 URL 及 查询 参数 
没有 在 API 级 别 上 公开 )。 

由 于 HTTP 通信 本 身 不 是 加 密 的 ， 因 此 可 以 对 通信 进行 分 析 以 模拟 API 的 功能 ， 不 过 采用 这 种 做 法 
的 话 ， 就 倒退 至 了 Web 抓 取 的 时 代 。 直 接 使 用 语言 API 即 可 。 

关于 API 的 文档 ， 可 以 参见 以 下 站 点 。 本 书 将 介绍 Google Maps API 的 第 3 版 。 


http://code.google.com/apis/maps/documentation/javascript/ 
在 使 用 Google Maps API 时 ， 我 们 需要 先 了 解 一 些 术语 的 含义 。 表 20.3 对 它们 进行 了 总 结 。 
表 20.3 与 地 图 相关 的 术语 



















































































英语 中 文 
latitude 纬度 
longitude 经 度 
加 | 20.3.4 简单 的 Google Maps API 示例 | 





本 节 将 介绍 如 何在 代码 中 使 用 Google Maps API， 以 在 浏览 器 中 显示 地 图 。 代 码 清 单 20.6 中 的 
JavaScript 代码 ， 其 实 是 一 条 通过 new 表达 式 ， 创 建 一 个 google.maps.Map 对 象 实例 。 在 其 他 几 行 中 ， 仅 
仅 构 造 了 new 表达 式 所 需 的 参数 而 已 。 此 处 ，new 表达 式 的 结果 被 赋值 给 了 map， 不 过 这 不 是 必须 步骤 。 

在 代码 清单 20.6 中 ， 用 于 绘制 地 图 的 JavaScript 代码 和 所 要 进行 绘制 的 HTML 元 素 组 合 在 了 一 起 。 
在 代码 中 ， 是 通过 HTML 元 素 的 id 属性 将 其 结合 的 。 此 时 ， 在 JavaScript 代码 中 引用 了 id 的 值 为 map_ 
canvas 的 div 元 素 。 从 代码 中 我 们 也 能 看 出 ，id 属性 的 值 是 没有 固定 标准 的 ， 根 据 开发 者 的 喜好 选取 即 可 。 
| 代码 清单 20.6 ”使 用 Google Maps API 

=<bedy onload= initialize() > 


<script src="http://maps.google.com/maps/api/js?sensor=false'"></script> 
“Serie Eve ue/ vaserle 
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RS mite el 
var latilng = new google.maps.LatLng(35.6642722, 139.7291455); 
var myOptions = { 
ZON: 
center: latlng, 
mayTypeld: google.maps.MapTypelId .ROADMAP 


be 


Var map = new google.maps.Map (document .getElementById("map canvas"), mpOptions); 
en 
<div id="map canvas" style="width:100%; height:100%"></div> 
</body> 











只 要 通过 代码 清单 20.6 这 样 的 代码 ， 就 能 够 在 HTML 内 创建 iframe 并 显示 Google Maps 界面 ， 实 现 
与 其 几乎 相同 的 功能 。 在 自己 的 代码 中 使 用 Google Maps API， 就 能 实现 以 下 这 些 扩展 功能 。 

@ 捕获 事件 

@ 显示 控件 、 标 记 、HTML 元 素 ( DOM 元 素 ) 等 内 容 

















这 样 一 来 ， 就 能 通过 JavaScript 实现 地 图 的 拖 动 、 地 图 标记 的 添加 ， 或 者 在 用 户 对 地 图 进行 操作 时 执 
行 一 些 自 定义 的 处 理 。 
我 们 来 看 一 个 通过 代码 对 地 图 进行 操作 的 例子 。 像 下 面 这 样 ， 对 google.maps.MAP 实例 的 方法 进行 
调用 之 后 ， 就 能 够 获取 地 图 的 状态 ， 并 对 地 图 进行 操作 。 


var map = new google.maps.Map (document .getElementById("map canvas"), myOptions); 
mapBoaney Lo oo 


panBy 方法 的 功能 是 移动 地 图 的 显示 区 域 ( 类 似 于 相机 的 镜头 摇摆 效果 )。 


国 20.3.5 事件 l 


基于 Google Maps 的 程序 设计 的 基本 流程 是 ， 为 对 象 设置 事件 处 理 程序 ， 并 根据 事件 设计 相应 的 处 
理 操作 。 也 就 是 所 谓 的 事件 驱动 型 的 代码 。 如 果 有 在 视窗 系统 中 开发 GUI 程序 的 经 验 ， 对 这 种 程序 设计 
模型 应 该 会 很 熟悉 。 
从 代码 清单 20.6 中 我 们 可 以 看 到 ，Google Maps API 将 通过 new 来 创建 对 象 ， 是 一 种 基于 类 的 API。 
姑且 不 论 优 劣 ，Google Maps API 是 一 种 传统 的 基于 类 的 事件 驱动 型 API。 
Google Maps 的 对 象 支持 以 下 这 些 事件 。 
@ click 
® dblclick 


@ mouseup 































































































® mousedown 
® mouseover 
全 mouseout 


这 些 事件 的 名 称 和 功能 ， 与 第 3 部 分 介绍 的 DOM 的 事件 相似 。 不 过 ， 这 些 事件 是 在 Google Maps 
API 层 中 进行 定义 的 ， 并 不 是 DOM 中 的 事件 。 事 件 处 理 的 基本 形式 为 通过 addListener 方法 将 事件 与 事 
件 处 理 程 序 相 关联 ， 如 以 下 代码 所 示 。 




















| 












































google.maps .event .addListener ( 目标 对 象 ， 表示 事件 名 称 的 字符 串 ， 表 示 事 件 处 理 程序 的 函数 ) ; 


根据 目标 对 象 的 不 同 ， 能 用 于 表示 事件 名 称 的 字符 串 也 有 所 不 同 。 关 于 各 种 对 象 所 支持 事件 名 称 ， 
请 参见 API 的 参考 文档 。 代 码 清单 20.7 是 一 个 事件 处 理 的 具体 示例 。 
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上 代码 清单 20.7 Goog 


Web API 


le Maps API 中 事件 处 理 的 基本 流程 


=<bedy onload= Winielalizel() > 
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 

Eunceone mite 


var lat 
var myO 


Zoom: 
Senters 


二 可 省 三 
ptions 


8, 


new google.maps.LatLng(35.6642722, 


{ 


Latlrnoy 


/OS EN 


mayTypeld: google.maps.MapTypelId .ROADMAP 





// 创 要 


var map 


// 为 ma 
google. 
yh 


var marker 


2 


google.maps .event .addListener (marker, 


EE map 对 象 


= new google.maps.Map (document .getElementById ("map canvas"), 


p 对 象 的 click 事件 添加 事件 处 理 程序 
maps.event .addListener (map, 'click', 
创建 marker 对 象 
new google.maps.Marker ({ 
position: event.laglng, 

map: map 


mpoOptions) ; 























function (event) 


{ 











为 marker 对 象 的 click 和 导 





人 件 添加 对 





有 件 处 理 程序 


'click', function (event) 


( 


marker.setMap (null); 


J 


}) 








/en 

<div id="map canvas" style="width:100%; height:100%"></div> 

</body> 

接 下 来 ， 我 们 来 介绍 一 下 对 代码 清单 20.7 的 执行 方式 。 代 码 中 直至 通过 new 表达 式 创建 google. 


maps.Map 实例 为 止 的 部 分 ， 与 代码 清和 

















象 )。 之 后 ， 通 过 调 
中 ,事件 处 型 
问题 的 。 

在 事件 处 理 程序 9 














程序 被 指定 为 了 一 个 匿名 函数 。 当 然 ， 声明 





























和 20.6 是 相同 的 ( 下 文中 将 会 把 google.maps.Map 实例 称 为 map 对 
addListener 方法 ， 为 map 对 象 的 click 事件 设置 了 事件 处 理 程序 。 在 代码 清单 20.7 
个 具有 和 名称 的 函数 并 进行 设 定 ， 也 是 没有 





















































P 含 有 两 个 处 理 操作 。 其 一 是 创建 google.maps.Marker 实例 。 在 创建 了 google.maps. 

















Marker 实例 之 后 ， 就 外 
和 外 20.7 中 ， 在 创 | 如 
至 事件 处 理 程序 的 参数 ， 来 获得 点 击 的 坐标 ( event.lat 

之 后 ， 还 要 为 标记 的 click 习 


人 码 清 六 








法 。 如 果 setMap 方法 
置 的 标记 。 


代码 清单 20.7 的 代码 运 月 
实际 处 理 程序 中 访问 marker 
作为 对 比 ， 代 码 清 
写 的 代码 更 符合 JavaScript 的 风格 。 不 过 ， 只 要 根据 自 
20.8 没有 使 用 特殊 的 库 ， 而 是 直接 对 prototype 对 象 进 行 操 作 。 在 一 些 


= 
[| 

















E 够 在 地 图 上 显示 标记 (图标 )。 虽 然 也 可 以 将 实例 的 创建 及 显示 分 离 ， 不 过 在 代 
EE 实例 时 同时 传递 了 map 对 象 ， 实 例 的 显示 与 创建 是 同时 进行 的 。 可 以 通过 被 传递 
， 并 在 该 位 置 显示 标记 。 

有 件 设置 事件 处 理 程序 ， 并 在 事件 处 理 程序 内 对 标记 对 象 调 
的 参数 被 指定 为 了 null， 则 不 会 显示 该 标记 ， 因 出 



































j setMap 方 
可 以 通过 这 种 方式 来 隐藏 点 击 位 





























有 到 了 闭 包 。 在 map 对 象 的 事件 处 理 程序 中 访问 map 变量 ， 以 及 在 标记 的 








变量 ， 都 是 借助 闭 包 实现 的 “。 
单 20.8 是 一 种 基于 类 的 事件 处 理 方式 。 不 同 于 基于 闭 包 的 事件 处 理 ， 这 种 方式 所 




















己 的 喜好 ， 自 由 地 选择 一 种 方式 即 可 。 代 码 清单 


库 中 ， 隐 藏 了 基于 类 的 实现 的 具体 












































细节 ， 如 果 使 用 
第 5 版 中 的 bind 方法 。 











中 关于 闭 包 与 bind 方法 ， 


了 这 些 库 ， 则 应 注 








FE 意 需 要 遵循 其 相关 规范 。 此 外 ， 代 码 清单 20.8 还 使 用 了 ECMAScript 











请 
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灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 


| 代码 清单 20.8 ”基于 类 的 事件 处 理 风格 


) I> 
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
// MyEventListener 类 的 构造 函数 


<body onload="initializel( 


Eunetrom YEVen EL ist en nap, 


this.map = map 


第 20 章 Web API 的 实例 


latLng) { 


// 为 map 对 象 的 Sr 事件 添加 事件 处 理 程序 


google.maps.event.addListener (map, 'click', this.show marker.bind!(t 


} 


// MyEventListener 类 的 方法 


MyEventListener.prototype.show marker = function(event) { 
var marker = new google.maps.Marker ({ 
position: event.latLng, 


map: this.map 
a 
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as 


google.maps.event .addListener (marker, 'click', this.hide marker.bind(this, marker)); 


// MyEventListener 类 的 方法 
MyEventListener.prototype.hide marker = function(marker, event) { 


marker.setMap (null); 


} 


funotion imtoolizel( 


Var latlng = new google.maps.LatLng(35.6642722, 139.7291455); 


var myOptions = { 
Zoom: 8， 
center: latlng, 


mayTypeId: google.maps.MapTypeld .ROADMAP 


了 


Var map = new google.maps.Map (document .getElementById("map canvas"), myOptions); 
new MyEventListener (map); 


} 


Nseries 


<Anyv gd uaeanvas ee nae: Loo en 00 /dm 


</body> 


Google Maps API 还 能 捕获 DOM 的 事件 。 例 如 ， 可 以 下 面 的 代码 这 样 ， 





性 蔡 换 为 load 事件 。 


二 





将 body 














google.maps.event .addDomListener (window, 'load', initialize); 


图 20.3.6 Geolocation API 与 Geocoding API 


本 节 来 介绍 一 种 Google Maps API 


PI。Geolocation API 的 功能 是 获 























Geolocation ， 就 能 够 通过 GPS 过 











是 否 会 使 用 GPS 来 获取 位 置信 息 








司 ; 


取 设 





的 应 








Geolocation 则 会 通过 IP 地 址 来 推测 设备 的 
关于 Geolocation API 的 标准 ， 请 参 




















浏览 器 在 调用 Geolocation API 时 ， 都 会 向 


对 此 请 加 以 注意 。 





参见 











标签 中 的 onload 属 





em 


应 用 实例 ， 在 该 例 中 ， 结 合 使 用 了 Geolocation API 与 Geocoding 








备 的 位 置信 息 。 例 如 ， 对 于 支持 GPS 的 设备 ， 如 果 其 浏览 器 支持 








位 置 ” 





区 设备 的 位 置信 息 。GPS 只 是 获取 位 置信 息 的 方式 之 一 ，Geolocation 
息 ， 取 决 于 具体 的 实现 。 如 果 GPS 不 可 用 ，Google Ng API 中 的 


下 面 的 站 点 。 所 发 送 的 位 置信 息 是 一 种 隐私 内 容 ， 因 此 ， 通 常 











http://www.w3.org/TR/geolocation-API/ 























Geocoding 是 一 种 可 以 通过 位 置信 息 〈 经 度 及 纬度 ) 来 查找 住址 ， 或 反 过 来 通过 人 


























户 请 求 运 支行 许 可 。 如 果 用 户 不 允许 执行 ， 调 用 将 以 失败 告终 ， 





E 址 查找 位 置信 息 的 











QD 不 过 ,通过 IP 地 址 获取 的 位 置信 息 ， 其 精度 只 能 说 是 聊 胜 于 无 。 
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Web 服务 。 除 了 Google， 也 有 一 些 其 他 的 Web 服务 通过 Web API 提供 了 Geocoding 功能 。 这 


Google 专 有 的 服务 。 
在 代码 清单 20.9 中 ,在 run 函数 内 通过 Geolocation API 获取 了 设备 的 当前 位 置 ( 调 ) 





非 是 一 项 












































] 7 navigator. 





geolocation.getCurrentPosition )。 如果 调用 成 功 ， 则 会 创建 一 个 google.maps.Geocoder 实例 ， 并 借助 


Geocoding 来 取得 该 位 置信 息 所 对 应 的 住址 。 


代码 清单 20.9 
| 代码 清单 20.9 在 


<body> 























所 得 到 的 结果 住址 将 通过 alert 显示 ， 然 后 以 当前 位 置 为 中 心 显 示 地 图 。 
代码 中 使 用 Geolocation 与 Geocoding 的 示例 



































<script src="http://maps.google.com/maps/api/js?sensor=true"></script> 


<script type= 
Snelom en 


"text/javascript"> 


dt 


if (navigator.geolocation && navigator.geolocation.getCurrentpPosition) { 
// 调用 Geolocation API 
navigator.geolocation.getCurrentPosition(function(pos) { 


1 
} 


see 
=aiv Omnieles 
Emma 三 
</body> 








// Geolocation API 的 回调 函数 
var lat = pos.coords.latitude; 
var lng = pos.coords.1longitude; 











// 调用 Geocoding API 
Var geocoder = new google.maps.Geocoder(); 
geocoder.geocode({ 'latLng': new google.maps.LatLng(lat, lng) }, 

// Geocoding API 的 回调 函数 

function(results, status) { 

if (status == google.maps.GeocoderStatus .OK) { 
ES 
eulerntelnes als la ormeeteeomadgessy 














} else { 
alert ("Geocode error: " + status); 


J 


var latilng = new google.maps.LatLng(lat, lng); 
var myOptions = { 

ZOOm: 14, 

center: latlng, 

mapTypeId: google.maps.MapTypelId .ROADMAP 


new google.maps.Map (document .getElementById("map canvas"), myOpti 


"zun () "> 获取 当前 位 置 </div> 
canvas" style="width:100%; height:100%"></div> 


| 20.4 | Yahoo! Flickr 


ons); 





Flickr 是 一 个 典型 的 照片 分 享 服务 ， 在 Web 2.0 这 个 词 刚 出 现时 就 已 经 存在 。 现 在 ，Flickr 已 经 被 


Yahool 收购 。 可 以 通过 下 面 的 URL 查看 其 Web API 的 参考 文档 。 














http://developer.yahoo.com/flickr/ 


http://www.flickr.com/services/api/ 


根据 前 一 章 中 表 19.1 的 分 类 ，Flickr 的 Web API 中 仪 提供 了 HTTP API， 而 HTTP API 又 分 为 REST、 
XML-RPC 及 SOAP 三 种 类 型 。 其 语言 API 是 由 第 三 方 提供 的 。 由 于 这 是 一 种 流行 的 Web A 
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多 程序 设计 语言 都 已 经 有 了 相对 应 的 语言 API。 

Flickr 的 Web API 被 公开 时 ，RESTful 这 一 概念 还 没有 像 现在 这 样 流 行 。 这 时 ， 对 于 RESTful 的 
URL 设计 ， 还 没有 取得 完全 一 致 的 意见 ， 将 非 SOAP 的 Web API 称 为 RESTful API 的 做 法 也 才刚 出 现 。 
因此 ， 尽 管 Flicker 的 REST API 在 形式 上 确实 不 是 SOAP 类 型 ， 但 其 设计 的 核心 思想 却 是 RPC。 虽 然 它 被 称 
为 REST 类 型 ， 但 却 不 是 REST 风格 的 面向 资源 ( 面向 文档 ) 的 设计 方式 。 与 之 后 将 要 说 明 的 Twitter API 比 
较 之 后 ， 大 家 就 能 很 容易 地 理解 这 一 点 。 以 现在 的 标准 来 看 ，Flickr 的 API 设计 有 些 陈 旧 。 当 然 ， 说 一 个 设 
计 是 新 还 是 旧 是 比较 主观 的 ， 大 家 只 要 将 这 一 观点 作为 一 种 参考 即 可 。 

Flickr 的 Web API 将 会 把 请 求 发 送 至 以 下 的 URL。 用 Flickr API 的 术语 来 说 ， 该 URL 被 称 为 端点 
( endpoint )。 
























































http://secure.flickr.com/services 

http://api.flickr.com/services 

可 以 通过 发 送 至 端点 URL 的 请 求 参 数 ， 来 对 各 种 操作 进行 设 定 。 其 中 最 为 重要 的 是 method 参数 。 
method 参数 的 值 所 指定 的 是 操作 名 称 。 下 面 是 一 个 请 求 URL 的 例子 ， 在 下 一 节 中 还 会 进行 详细 说 明 。 

http://api.flickr.com/services/rest/?method=flickr.test.echo 

该 URL 将 会 调用 人 ckrtestecho 方法 。 在 API 参考 文档 中 ， 记 载 了 这 类 方法 名 的 一 览 表 。 通 过 Web 
API 可 以 实现 照片 的 获取 、 更 新 及 添加 注释 等 操作 。 虽 然 前 面 讲 到 Flickr API 的 设计 有 些 陈 旧 ， 但 它 毕 竟 
已 有 一 定 的 历史 ， 功 能 很 全 面 。 

图 20.6 是 打开 API 参考 文档 时 的 界面 截图 。 其 中 ，flickr.activity.userComments 等 相当 于 方法 名 称 。 


| 20.6 ”Flickr 的 Web API 方法 一 览 























































API Methods 





BBt Formats 


| 
ec 


hse Formats 


| 




















s 





























每 种 方法 都 具有 其 所 需 的 参数 及 选项 参数 。 这 些 参数 通过 URL 的 查询 参数 相连 。 这 就 是 Flickr 的 
Web API 的 基本 结构 。 
国 20.4.1 Flickr Web API 的 使 用 | 


要 使 用 Flickr 的 Web API， 必 须 有 其 API 密 钥 。 而 要 获取 API 密 钥 ， 则 必须 有 Yahoo! ID。 这 些 都 是 
可 以 免费 获取 的 。 访 问 以 下 页 面 中 的 Get an API Key 链接 ， 就 可 以 获得 API 密 钥 。 


http://www.flickr.com/services/ 
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Flickr API 对 JSONP 提供 了 支持 。 因 此 ， 可 以 在 客户 端 JavaScript 中 使 用 该 API。 不 过 ， 在 通过 客 
户 端 JavaScript 使 用 该 API 时 有 一 个 很 大 的 问题 ， 即 API 密 钥 无 法 加 密 。 由 于 API 密 钥 将 会 被 传递 给 
HTTP 请 求 的 查询 参数 ， 因 此 无 法 将 其 隐藏 。 

不 过 ，API 密 钥 是 否 需 要 加 密 取 决 于 开发 者 的 想法 。 考 虑 一 下 API 密 钥 被 盗 后 可 能 产生 的 实际 损失 ， 
会 发 现 情况 有 些微 妙 。 即 使 获取 了 API 密 钥 ， 也 无 法 盗 取 相 应 的 Flickr 账号 。 对 此 人 们 的 观点 各 不 相同 ， 
不 可 一 概 而 论 。 本 书 假定 不 需要 对 Flickr 的 API 密 钥 进行 加 密 ， 并 以 此 为 前 提 在 客户 端 JavaScript 中 调用 
该 Web API。 

和 Google Translate API 一 样 ， 首 先 通过 curl 指令 来 确认 其 功能 ( 图 20.7 )。 


上 图 20.7 通过 curl 对 功能 进行 确认 
export APIKEY= 所 获取 的 API 密 钥 


echo 仅 会 返回 所 传递 的 name 参数 的 值 ( 这 对 于 早期 的 功能 确认 来 说 ， 是 一 种 很 方便 的 方式 ) 
默认 的 响应 输出 格式 是 XML 
curl "http://api.flickr.coryVservices/rest/?method=flickr.test.echo&name=hello&api key=${APIKEY}" 
<?xml version=nl 0 encoding=" utf=8. 2 
=rap otat=uoks 
<method>flickr.test.echo</method> 
<name>hello</name> 
<api_key> 所 获取 的 API 密 钥 </api key> 
</rsp> 




















# 将 format 参数 指定 为 json 之 后 ， 就 会 返回 JSONP 格式 的 响应 

# JSONP 中 函数 名 的 默认 值 为 jsonFlickrApi 

$ curl "http://api.flickr.com/services/rest/?method=flickr.test.echo&name=hello&api 
key=$ {APIKEY}&format=json" 

TeonmlierneApi (umetnoa content ur test echnou am eontene ume 
"api key":{" content":" 所 效 取 的 API 密 钥 "},， "format":{'" content":"json"}, "stat":"of"}) 


# 可 以 将 jsoncallback 参数 指定 为 JSONP 的 函数 名 

$ curl "http://api.flickr.com/services/rest/?method=flickr.test.echog&name=hello&api 
key=$ {APIKEY}&format=jsong&jsoncallback=myfunc" 

my ue me nod on en un et econo nan ontent eo 
"api key":{" content":" 所 获取 的 API 密 钥 "},， "format":{" content":"json"}, "stat":"of")})) 


# 搜索 图 片 ( 搜索 字符 串 为 gozilla) 

$ curl "http://api.flickr.com/services/rest/?method=flickr.photos.search&text=gozilla 
&api key=${APIKEY}&format=json&jsoncallback=myfunc" 

myfunc ({"Photos" : 下 略 }) 


国 20.4.2 Flickr Web API 的 使 用 实例 | 


下 面 的 代码 将 会 通过 Flickr API， 以 关键 字 搜 索 照 片 ， 并 将 结果 显示 出 来 (代码 清单 20.10 )。 其 中 
YOUR_APIKEY_ 需 要 替换 为 所 获取 的 API 密 钥 。 

下 面 ， 我 们 来 说 明 一 下 代码 清单 20.10 中 的 要 点 。jQuery 隐藏 了 JSONP 的 调用 。 将 $.ajax 函数 的 参数 对 
象 的 dataType 属性 设 定 为 jsonp 的 话 ， 就 能 隐藏 内 部 的 JSONP 处 理 (诸如 动态 创建 script 标签 等 操作 )。 默 
认 情 况 下 ，jQuery 会 将 用 于 指定 JSONP 回调 函数 的 HITP 查询 参数 名 假定 为 callback。 而 Flickr 的 查询 参 
数 名 是 jsoncallback， 因 此 ， 必 须 在 jQuery 中 显 式 地 对 其 (jsonp 属性 的 值 ) 进行 修改 。 

关于 响应 的 格式 ， 请 参见 Flickr 的 参考 文档 。 在 枚 举 响应 时 ,使 用 的 是 ECMAScript 第 5 版 中 的 
forEach， 对 此 请 加 以 注意 。 搜 索 操 作 的 响应 格式 如 下 ， 根 据 该 标准 可 以 获得 图 片 的 URL。 


http://farm {$farm-id} .static.flickr.com/{$server-id}/{$id} {$secret}.jpg 



























































| 代码 清单 20.10 ”Flickr Web API 的 使 用 示例 


<body> 
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<seript ore "nee /a daleapls eomaax/ lbs/ aUuerv /on uery mm 
type="text/javascript"></script> 
<script 
function doSsearch() { 
Sjer ll 
EvDey Gei 
LU "ne /op tii comservices/rest/ 
'data': {method:'flickr.photos/search', text:$('#querysString') .val(), api key:'_ 
YOUR TS APLIKEY 7 Eormae sen 
'dataType':'jsonp', 
user nea a 
'success':function(data) { 
var content = S$('#content'); 
if (data.photos && data.photos.photo) { 
data.photos.photo.forEach (function(photo) { 
anglel te tar noreorarm nn tat liek om 
+ photo.server + '/' + photo.id + ' ' + photo.secret + '.jpg'; 
content .append('<img src="' + img Url + '"</img>'); 
J 
} 
} 
放生 
} 
ET 


<input type="text" id="queryString" name="queryString" /> 


<div onclick="doSearch()">Go</div> 
<div id="content"></div> 
</body> 








在 Flickr 的 Web API 中 ， 有 一 些 是 需要 进行 验证 的 。Flickr 自 定义 了 一 套 验 证 机 制 ， 它 类 似 于 前 一 
章 介绍 的 OAuth。 从 历史 的 角度 来 看 ，Flickr 是 使 用 OAuth 这 样 的 权限 转让 协议 的 先驱 ，OAuth 是 其 
标准 化 之 后 的 产物 。 不 过 ， 这 仅 限 于 图 19.5 的 情况 。 在 Flickr API 中 ,没有 类 似 于 图 19.6 中 的 OAuth 
用 户 代 理 流程 的 机 制 。 因 此 在 Flickr 中 ,需要 进行 验证 的 Web API 是 无 法 在 客户 端 JavaScript 中 进行 
调用 的 。 














| 20.5 | Twitter 























与 之 后 将 要 介绍 的 Facebook 一 样 ，Twitter 在 公开 了 Web API， 使 第 三 方 应 用 大 量 涌现 并 构筑 了 其 
软件 生态 环境 之 后 ， 获 得 了 巨大 的 成 功 "。 对 Twitter 这 一 服务 ， 在 此 不 再 说 明 。 从 Web API 的 角度 来 看 ， 
Twitter 所 提供 的 服务 较为 单一 。 通 过 对 所 谓 的 Tweet ( 推 文 ) 进行 更 新 与 获取 ， 以 及 以 关注 的 形式 连接 
用 户 ，Twitter 构造 出 了 一 种 社交 图 谱 。 这 就 是 其 Web API 的 主要 操作 对 象 。 

关于 Twitter API 的 参考 文档 ， 请 参见 下 面 的 URL。 

http://dev.twitter.com/ 


Twitter API 可 以 分 为 REST API 与 Streaming API 两 类 。 本 书 介 绍 的 是 REST API。 在 REST API 中 ， 
搜索 API 的 规则 略 有 些 不 同 。 这 仅仅 是 由 于 历史 原因 所 致 ， 并 非 技 术 问题 。Streaming API 无 法 在 客户 端 
JavaScript 中 使 用 ， 因 此 我 们 将 省 略 这 部 分 说 明 。 

国 20.5.1 搜索 API | 

本 节 将 先 介 绍 一 下 Twitter API 中 简单 而 实用 的 搜索 API。 搜 索 API 将 会 返回 包含 参数 所 指定 的 搜索 

















































































































中 Twitter 是 当前 最 流行 的 微 博客 服务 ， 在 翻译 本 书 时 全 球 已 有 超过 2 亿 用 户 ， 在 大 多 数 国家 处 于 绝对 领先 地 位 。 国 内 的 新 
浪 徽 博 等 是 模仿 Twitter 并 增加 了 一 系列 本 土 化 功能 的 服务 。 译 者 注 
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字符 串 的 Tweet。Twitter 服务 本 质 上 并 不 要 求 精确 的 搜索 功能 ， 对 于 这 一 搜索 功能 ， 只 要 将 其 理解 为 ， 
在 已 经 存在 的 推 文 (Tweet ) 中 找 出 一 些 与 搜索 相 匹 配 的 内 容 即 可 。 

将 搜索 API 的 请 求 URL 格式 中 可 以 改变 的 部 分 写 为 {parameter} 之 后 ， 就 得 到 了 下 面 这 样 的 请 求 
URL, 

















http://search.twitter.com/search.{format})?={ 搜索 字符 串 } &{ 其 他 参数 } 


format 部 分 可 以 被 奉 换 为 json 或 atom 等 字符 串 。 例 如 ， 对 于 搜索 字符 串 为 emacs， 响 应 格式 为 














JSON 的 请 求 URL， 下 面 是 一 种 最 简单 的 写法 。 
http://search.twitter.com/search.json?q=emacs 
关于 其 他 参数 ， 请 参见 API 的 参考 文档 。 可 以 像 下 面 这 样 ， 通 过 curl 指令 来 确认 其 功能 。 接 下 来 ， 
大 家 亲自 确认 一 下 搜索 的 结果 吧 。 
参数 的 说 明 


# 

# q=emacs 搜索 关键 字 ( 必须 ) 
# locale=ja 日 语 
# 
$ 
工 


geocode=35.6642722,139.7291455,10km 加 入 位 置信 息 
cuzr1l1 "http://seatrch.twitter.com/search.json?q=emacs&locale=ja&ggeocode=35.6642722， 
ee Rr OKEmY 





如 果 只 需 在 服务 央 端 使 用 Twitter API， 所 有 的 说 明 就 已 经 完成 了 。 具 体 的 实现 方式 则 应 遵循 各 个 程 
序 设计 语言 的 习惯 。 既 可 以 在 代码 中 直接 使 用 HTTP， 也 可 以 使 用 库 来 隐藏 HTTP 通信 ， 这 都 是 开发 者 
的 自由 。Twitter 并 没有 提供 语言 API， 不 过 已 经 有 了 很 多 的 第 三 方 语言 API。 主 流 的 程序 设计 语言 通常 
都 有 其 对 应 版 本 。 

而 另 一 方面 ， 对 于 客户 端 JavaScript， 一 如 既往 地 存在 蜂 源 限制 。 通 过 使 用 JSONP， 就 可 以 在 
Twitter API 中 回避 跨 源 限制 。 像 下 面 这 样 传递 了 callback 参数 之 后 ， 就 能 返回 JSONP 形式 的 响应 。 


$ curl "http://search.twitter.com/search.json?gq=javascript&locale=ja&geocode=35.66 
42722,139.7291455,10km&callback=myfunc" 
























































myfunc({"results":[{... 省 略 }] ，... 省 略 }) 
通过 客户 端 JavaScript 调用 该 JSONP 是 很 容易 的 ， 因 此 就 不 再 举例 "。 


国 20.5.2 REST API | 


接 下 来 ， 我 们 说 明 一 下 Twitter API 中 的 REST API。 关 于 REST API 的 一 览 表 ， 请 参见 站 点 的 参考 文 
档 。REST API 具有 多 种 功能 ， 通 过 该 API， 可 以 执行 对 Tweet ( 推 文 ) 的 显示 、 更 新 ， 及 通知 用 户 与 关 
注 用 户 等 操作 ， 以 取得 有 这 些 操作 所 构筑 的 社交 图 谱 。 还 可 以 通过 API 获得 Tweet 趋势 等 相关 信息 。 尽 
管 下 面 的 说 法 中 ， 有 些 鸡 生 蛋 蛋 生 鸡 的 成 分 ， 不 过 不 难 理解 ，Twitter 这 一 服务 能 够 成 功 的 主要 原因 之 一 
正 是 由 于 它 提供 了 丰富 的 API。 
图 20.8 是 打开 了 Timeline resource 的 API 参考 文档 时 的 界面 。 值 得 注意 的 是 ，API 参考 文档 也 用 到 
了 资源 这 一 术语 。 








































































































四 可 以 参见 Google Translate API 及 Flickr 相关 的 小 节 ， 其 中 有 类 似 代码 。 搜 索 API 不 需要 进行 用 户 验证 。 
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| 20.8 Twitter REST API 

















有 很 多 的 Web API 虽然 自称 是 RESTful， 但 却 没有 采用 RESTful 的 URL 设计 方式 。 而 Twitter 的 REST 
API 是 基于 正确 的 RESTful 思想 设计 的 。 也 就 是 说 ， 它 不 是 RPC 形式 的 API， 而 是 面向 资源 的 Web API。 
从 URL 设计 中 ， 就 能 体现 出 其 面向 资源 的 特征 。 与 Flickr API 进行 比较 的 话 ， 就 能 很 容易 地 发 现 这 一 点 。 
对 于 Flickr API 的 URL， 传递 给 method 参数 的 是 方法 名 称 ( 操作 名 称 )。 与 此 同时 ，Twitter API 的 URL 的 
操作 对 象 是 资源 名 称 。 其 操作 是 通过 HTTP 的 GET 及 POST 方法 来 指定 的 。 

将 REST API 的 请 求 URL 格式 中 可 以 改变 的 部 分 写 为 {parameter} 之 后 ， 就 得 到 了 下 面 这 样 的 请 求 
URL, 



































http://api.twitter.com/ {version}/{resource}. {format}?{ 参数 } 


在 执笔 本 书 时 ，version 仅 有 1 这 一 种 。format 则 可 以 指定 为 jgon 、xml、rss 及 atom 这 几 个 字符 串 的 
其 中 之 一 。resource 部 分 所 写 的 是 资源 名 。 例 如 对 于 资源 为 statused/public_timeline， 响 应 格式 为 ISON 的 
请 求 URL， 下 面 是 一 种 最 简单 的 写法 。 

http://api.twitter.com/1/statuses/public_timeline.json 


关于 REST API 所 支持 的 资源 名 ， 请 参见 API 的 参考 文档 。 原 则 上 ， 请 求 URL 都 是 基于 http://api. 
twitter.com 扩展 而 成 的 。 

Twitter 的 REST API 对 JSONP 提供 了 支持 。 因 此 ， 可 以 在 客户 端 JavaScript 中 使 用 该 API， 且 不 会 发 生 
跨 源 限制 。 像 下 面 这 样 将 callback 参数 传递 给 请 求 URL 之 后 ， 就 能 获取 JSONP 格式 的 响应 。 

http://api.twitter.com/1/statuses/public_timeline.json?callback=myfunc 


通过 客户 端 JavaScript 调用 该 ISONP 是 很 容易 的 ， 所 以 不 再 举例 。 大 家 可 以 参见 Google Translate API 
及 Flickr 相关 的 小 节 ， 其 中 有 类 似 代 码 。 之 所 以 不 介绍 实际 的 例子 还 有 一 个 原因 。 比 起 直接 通过 客户 端 
JavaScript 调用 Twitter API， 更 推荐 大 家 使 用 下 面 的 @anywhere 或 Twitter Widget。 
































加 | 20.5.3 Twitter JS API @anywhere | 


有 一 些 Twitter API 是 需要 进行 验证 的 。 例 如 ， 执 行 Tweet 发 送 功能 的 API 便 是 如 此 。 通 过 前 一 章 介绍 
的 OAuth 2.0 方式 ，Twitter API 已 经 解决 了 这 一 问题 。 如 果 要 在 服务 器 端 调 用 Twitter API， 可 以 通过 图 19.5 
那样 的 流程 ， 让 用 户 进 行 权 限 转让 ， 然 后 调用 Web API。 可 以 自己 来 实现 这 一 流程 。 不 过 如 果 使 用 的 是 流 
行 的 程序 设计 语言 ， 则 会 有 相应 的 库 。 使 用 这 些 库 来 实现 权限 转让 会 更 加 容易 。 
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同样 地 ， 如 果 要 通过 客户 端 JavaScript 调用 需要 验证 的 Web API， 则 可 以 通过 OAuth 2.0 的 用 户 代理 
流程 ， 来 实现 权限 的 转让 (图 19.6 )。 有 一 种 名 为 @anywhere 的 API， 可 以 隐藏 这 一 OAuth 用 户 代理 流 
程 。 根 据 表 19.1 的 分 类 ， 之 前 小 节 介 绍 的 都 是 HTTP API， 而 @anywhere 则 是 针对 客户 端 JavaScript 的 
语言 API。 

为 了 使 用 @anywhere ( 正确 地 说 是 为 了 使 用 OAuth )， 必 须要 取得 API 密 钥 。 可 以 在 下 面 的 URL 中 
注册 应 用 ， 以 获取 API 密 钥 ( 网 20.9 )。 


http://dev.twitter.com/anywhere/apps/new 












































| 图 20.9 注册 应 用 


DT] 


| 20.10 @anywhere 


Follow GW 








Connect pjs2011a with your Twitter account to interact with 
your followers and share content through your timeline. 


Already have an account on Twitter? Sign in 


os page 


























代码 清单 20.11 是 使 用 @anywhere 的 代码 示例 。 YOUR_APIKEY 部 分 需要 替换 为 所 获取 的 API 密 钥 。 
代码 中 的 ' 任意 的 Twitter 账户 ' 部 分 则 需要 替换 为 感 兴趣 的 Twitter 账户 。 如 果 是 要 把 代码 清单 20.11 的 代码 片 
段 粘贴 至 自己 的 站 点 中 ， 以 让 访问 者 关注 自己 ， 则 可 以 将 其 替换 为 自己 的 Twitter 账户 。 

代码 清单 20.11 将 会 在 浏览 器 界面 中 显示 一 个 follow me 的 链接 。 在 点 击 了 链接 之 后 ， 将 会 跳 转 至 
新 的 界面 ， 选 择 是 否 要 关注 所 显示 的 Twitter 账户 〈 图 20.10 )。 在 图 20.10 中 ，pjs2011a 是 应 用 名 称 。 该 
界面 正在 向 用 户 请 求 许可 ， 以 进行 权限 转让 。 在 获得 了 授权 之 后 ， 将 会 以 用 户 所 具有 的 权限 来 执行 Web 
API， 进 行 关 注 。 这 里 的 用 户 指 的 不 是 显示 该 链接 的 Web 站 点 的 所 有 者 ， 而 是 通过 浏览 器 访问 了 该 页 面 
的 用 户 。 


有 代码 清单 20.11 @anywhere 的 代码 示例 


<script src="http://platform.twitter.com/anywhere.js?id= YOUR APIKEY &Vv=1"></script> 
<script type="text/javascript> 
twttr.anywhere (function (T) { 
T('!#follow') .followButton(' 任意 的 Twitter 账户 '); 
}); 
ene 



















































































sDan ld Eo 
</body> 


本 节 之 后 将 对 代码 清单 20.11 中 的 要 点 进行 说 明 。 一 旦 完成 了 anywherejjs 的 读 取 ， 就 会 隐 式 地 创建 
一 个 twttr 对 象 。@anywhere 的 基本 使 用 方式 是 调用 twttr 对 象 的 anywhere 方法 。 在 调用 过 程 中 ， 需 要 将 
一 个 含有 处 理 操作 的 回调 函数 传递 给 这 一 方法 的 参数 。 在 该 方法 的 内 部 ， 对 跨 源 限制 进行 了 处 理 ， 同 时 
执行 了 权限 转让 的 操作 。 不 过 ， 开 发 者 在 实际 使 用 时 并 不 需要 在 意 这 些 细节 。 

可 以 随时 调用 twttranywhere 方法 。 在 代码 清单 20.11 中 ， 该 方法 将 会 在 HTML 文件 读 取 完成 后 被 执 
行 ， 也 可 以 改 为 在 点 击 时 执行 该 方法 。twttranywhere 方法 的 回调 函数 的 参数 所 需 的 是 一 个 Twitter API 
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客户 端 对 象 。 代 码 清单 20.11 通过 变量 工 来 接收 该 对 象 。 下 面 的 结论 或 许 有 些 不 合 常规 ， 不 过 ， 对 该 
对 象 进行 方法 调用 ， 就 等 于 使 用 @anywhere API。 而 代码 清单 20.11 中 的 '#follow'， 将 会 通过 CSS 选 
择 右 样式 来 获取 DOM 元 素 。 这 种 方式 与 jQuery 的 代码 风格 是 一 致 的 。 这 是 因为 ，@anywhere 的 内 部 使 
用 的 正 是 jQuery。 除了 followButton，Twitter API 客户 端 对 象 还 提供 了 一 些 其 他 能 够 调用 的 方法 ， 更 为 详 
细 的 信息 ， 请 参见 API 的 参考 文档 。 这 些 API 非常 简单 ， 不 必 特 地 说 明 。 这 也 是 Web API 不 断 改进 的 一 
种 体现 。 



















































































国 20.5.4 Twitter widget | 


在 表 19.1 中 ，Web API 的 演进 被 分 为 了 HTTP API、 语 言 API 及 插件 API。 氨 今 为 止 ， 我 们 已 经 介绍 
了 HTTP API 和 语言 API ( @anywhere )。 最 后 将 会 介绍 Twitter Widget 这 一 插件 API。Twitter Widget 本 质 
上 是 一 种 自 定义 标签 ， 它 将 在 客户 端 被 解释 执行 。 只 要 在 HTML 中 粘贴 相应 的 代码 片段 ， 就 能 够 隐藏 所 
有 的 JavaScript 代码 ( 包括 对 跨 源 限制 问题 的 回避 ， 以 及 用 户 验 证 操作 的 处 理 )。 

Twitter Widget 分 为 JavaScript 版 与 frame 版 ,这 里 介绍 的 是 JavaScript 版 。 只 要 在 HTML 中 写 下 以 
下 代码 片段 ， 就 能 够 在 浏览 器 界面 中 显示 Tweet Button 及 Tweet 数 (图 20.11 )。 


<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> 
<a href="http://twitter.com/share" class="twitter-share-button">Tweet</a> 

















l 20.11 Tweet 按钮 与 Tweet 数 














Tweet | 194 
20.6 | Facebook 
国 20.6.1 Facebook 应 用 的 发 展 历程 | 





对 于 Facebook 这 一 服务 ， 想 必 已 无 需 再 多 做 介绍 。 在 执笔 本 书 时 ，Facebook 是 发 展 势头 最 好 的 SNS 
( 社会 化 网 络 服务 ，Social Network Service )。Facebook 如 此 有 名 ， 几 乎 已 经 成 为 了 SNS 这 一 类 型 的 代 名 
词 ”。 使 Facebook 一 举 成 名 的 是 Facebook 所 提供 的 各 种 应 用 。Facebook 应 用 其 实 有 一 段 不 为 人 知 的 发 展 
历程 ， 在 此 我 们 对 其 稍 做 总 结 。 

最 早 的 Facebook 应 用 分 为 两 种 形式 。 我 们 可 以 通过 在 ( 托管 了 Facebook 应 用 的 第 三 方 ) 服务 器 端 
调用 REST API 的 形式 ， 或 者 以 使 用 FBML 这 一 自 定义 标记 语言 的 形式 ， 来 实现 一 个 Facebook 应 用 。 
FBML 是 一 种 由 Facebook 服务 咒 进 行 解释 的 自 定义 标记 语言 ， 这 一 技术 与 PHP 及 JSP 处 于 同一 层面 。 虽 
然 从 用 户 的 角度 来 看 ， 这 两 种 形式 的 应 用 都 是 藤 于 (诸如 iframe 等 的 ) Facebook 页 面 中 的 ， 但 其 执行 方 
式 却 有 所 不 同 。 图 20.12 与 图 20.13 分 别 是 两 种 方式 的 执行 原理 。 
































































































































中 更 详细 的 信息 ， 可 以 参见 以 下 页 面 : https://twitter.com/about/resources/buttons. 译 者 注 


@， ” Facebook 是 当前 最 为 流行 的 SNS 网 站 ， 在 翻译 本 书 时 全 球 已 有 超过 11 亿 用 户 ， 在 大 多 数 国家 处 于 领先 地 位 。 国 内 的 人 人 
网 等 是 模仿 Facebook 并 增加 了 一 系列 本 土 化 功能 的 服务 译 者 注 
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| 图 20.12 早期 的 Facebook 应 用 ( iframe 版 ) 
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a ( 服务 提供 者 ) 

中 请 求 » 
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sm TS 中 

<iframe> 

浏览 昌 - _ _ _ Web API 

3 请 求 i 


请 求 (REST API) 
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人 @@) 响 应 
第 三 方 应 
上 图 20.13 早期 的 Facebook 应 用 (FBML 版) 
Facebook 
户 ( 服务 提供 者 ) 
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mw i 一 一 天 < FBMU 


(DFBML => HTML 的 转换 
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第 三 广度 
@) 请 求 


用 




















Facebook 的 API 已 经 发 生 了 巨大 的 进化 。 如 今 





，Facebook 应 用 

















@ 在 服务 器 端 调用 Graph API ( 并 通过 iframe 在 facebook 的 容器 内 显示 ) 


@ 在 客户 端 ( 浏览 器 ) 中 使 用 JavaScript API 


@ 在 客户 端 中 使 用 插件 ( Social Plugins ) 


以 下 是 各 种 执行 类 型 的 图 示 ( 图 20.14、 


图 20.15 )。 通 
流程 相同 ， 故 在 此 省 略 。 


| 图 20.14 Facebook 应 用 ( 在 服务 器 端 调用 Graph API ) 




















过 插件 的 使 用 方式 与 使 ) 























Facebook 


( 服务 提供 者 ) 
qd 一 一 pp 
prem HY Dh 省 加 


人 响应 
<iframe> 






浏览 器 Web API 


> (Graph API) 
中 ra 
第 三 方 应 





(3) 请 求 
iframe 





回响 应 
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的 执行 方式 可 以 分 为 以 下 三 种 。 


j JavaScript API 时 的 
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| 20.15 ”Facebook 应 用 ( 在 客户 端 中 使 用 JavaScript API ) 






































户 第 三 方 应 
B 一 放 
如 响应 





Facebook 


浏览 器 @) 请 求 ( 服务 提供 者 ) 







JavaScript API p> 
J 于 
(外 响应 中 
跨 源 通 信 ~ 
二 Web API 
(响应 














Graph API 是 一 种 典型 的 RESTful Web API。 在 调用 了 Web API 之 后 ， 就 能 搜索 Facebook 用 户 ， 并 
取得 用 户 之 间 的 好 友 关 系 ( 即 所谓 的 社交 图 谱 )， 或 者 进行 消息 发 送 等 ”。 

通过 Graph API， 就 能 对 Facebook 的 Web API 所 能 提供 的 功能 有 一 个 整体 把 握 。 在 执笔 本 书 时 ， 其 
功能 仍 在 不 断 增 加 ， 给 人 以 顶级 Web API 的 印象 。 图 20.16 是 打开 Graph API 的 参考 文档 时 的 屏幕 截图 。 


20.16 ”Facebook 的 Graph API 




















facebook DEvELOPERS 。 参考 资料 ”了 + 一 人。 性 入 事例 7D 人 了 7 了 











[TE 


目前 ，Graph API 并 不 是 以 通过 客户 端 JavaScript 直接 使 用 为 前 提 设 计 的 ， 需 要 通过 JavaScript API 来 
对 其 进行 利用 。 在 这 时 ， 还 能 同时 使 用 XFBML 这 一 Facebook 自 定 义 的 标记 语言 ， 客 户 端 JavaScript 将 
会 对 其 进行 解释 。 而 插件 ( Social Plugin ) 则 能 够 隐藏 XFBML 与 JavaScriptAPI， 以 进一步 简化 操作 。 

在 Facebook 的 插件 中 ，Like 按钮 (“ 赞 !” 按 钮 ) 非常 有 名 。 用 表 19.1 中 的 术语 来 说 的 话 ， 这 相当 
于 一 个 插件 API。 虽 然 与 JavaScript API 相 比 ， 插 件 API 的 自由 度 较 低 ， 不 过 只 要 以 类 似 于 博客 插件 的 方 
式 将 代码 片段 插入 HTML 内 ， 就 能 够 实现 相应 的 功能 。 在 这 一 过 程 中 无 需 关 心 内 部 的 具体 实现 。 










































































问 20.6.2 ”Facebook 的 JavaScript API | 
接 下 来 要 介绍 的 JavaScript API， 相 当 于 在 表 19.1 中 所 说 的 语言 API。 大 家 可 以 通过 下 面 的 站 点 查看 








中 ”Graph API 的 前 身 是 REST API， 不 过 与 名 称 相 反 ， 它 并 不 是 一 个 RESTfnl 设计 风格 的 Web API。 而 Graph API 则 是 一 个 
RESTful 设计 风格 的 Web API。 
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API 的 参考 资料 。 


http://developers.facebook.com/docs/reference/javascript/ 


JavaScript API 可 以 分 为 以 下 四 大 类 别 。 

@ Graph API 对 应 的 包装 API ( 通过 FB.api 方法 调用 ) 

@ XFBML 类 API ( XFBML 是 一 种 通过 客户 端 JavaScript 解释 的 标记 语言 
@ 事件 处 理 程序 类 API 


@ 其 他 


要 使 用 Facebook 的 JavaScript API， 要 先 在 Facebook 中 注册 该 应 用 ， 并 获得 应 用 站。 在 注册 应 


会 用 到 Facebook 
费 的 。 




































































时 


账户 ， 如 果 还 没有 Facebook 账户 ， 则 需要 注册 一 个 。 账 户 的 注册 和 应 用 的 注册 都 是 免 








可 以 访问 以 下 URL 以 注册 应 用 。 
http://developers.facebook.com/setup/ 
在 注册 过 程 中 ， 至 少 需 要 输入 应 用 程序 的 名 称 及 URL ( 用 于 OAuth 的 回调 函数 )。 之 后 便 可 以 各 











应 用 ID 与 密 钥 ( 












































A 得 



























































]j 于 图 19.5 中 的 OAuth 流程 )。 如 果 所 调用 的 Web API 需要 执行 验证 操作 ， 则 需要 使 用 


























OAuth 用 户 代理 流程 ( 图 19.6 )。 关 于 OAuth 的 详细 内 容 ， 请 参见 之 前 的 章节 。 





下 面 是 一 段 简 和 
































换 为 所 获取 的 应 
| 代码 清单 20.12 


Se olalos 





] ID。 
Facebook JavaScript API 的 使 用 示例 


root"></div> 


<script src="http://connect.facebook.net/zh CN/all.js"></script> 
<script type="text/javascript"> 


FB.init({ 
apprlos, 
Status 
Cookie : 
xfbml : 

0 


'_ YOUR APPID ', 
te, 
Erue, 

tEUS 


FB.login(function(response) { 
if (response.session) { 





FB.api('/me', function(response) { 
alert (response.name); 
} else { ee 
9 / 用 户 取 消 了 登录 
} 
0 
/ere 


国 20.63 


Facebook 的 插件 














的 使 用 JavaScript 的 范例 代码 ( 代码 清单 20.12 )。 其 中 _YOUR _APPID 部 分 需要 替 


根据 表 19.1 的 分 类 ，Facebook 插件 属于 插件 型 API。OAuth 用 户 代 理 流程 所 实现 的 权限 转让 操作 ， 


以 及 用 于 回避 跨 源 限制 的 代码 ， 都 被 隐藏 于 
型 API 的 Web 服务 。 

Facebook 插件 的 使 用 非常 简单 。 首 先 要 做 的 是 访问 以 下 的 URL， 以 会 话 的 形式 获取 所 需 的 代码 
20.17 )。 该 插件 分 为 这 ame 版 与 XFBML 版 ， 可 以 以 会 话 的 形式 选择 。 
























































http://developers.facebook.com/docs/plugins/ 
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F 了 API 内 部 。 个 人 认为 ，Facebook 提供 了 目前 最 先进 的 插件 


图 


| 20.17 ”Facebook 的 Like 按钮 











facebook DEvELOPERS 。 凶 考 资料 “74 一 3 人 潜入 事例 了 OD 又 1 


Step 1 - Get Like Button Code 
Getting Started 


Core Concepts 
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ap 





Socalpugns 
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end Button (XFBML Only) 
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Width (7) 
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Show foces 


Verb to dlsplay (7) 








BLike 四 Be the first of your friends to like this, 
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只 要 将 获得 的 代码 粘贴 至 HIML 内 ， 就 可 以 实现 相应 的 功能 。 代 码 清单 20.13 的 代码 片段 能 够 在 


浏览 器 界面 中 显示 Like 按钮 。 对 于 代码 内 的 _YOUR_URL 部 分 ， 需 要 改写 为 托管 了 该 HTML 的 站 点 


URL。 


| 代码 清单 20.13 ”Like 按钮 


iframe 版 


<iframe src="http://www.facebook.com/plugins/like.php?href= YOUR URL " 


scrolling="no" frameborder="0" 


style="border:none; width:450px; height:80px"></iframe> 


XFBML 版 


<script src="http://connect.facebook.net/zh CN/all.js#xfbml=1"></script> 


<fb:like></fb:like> 





和 上 一 节 中 的 Twitter Widget 一 样 ， 上 述 代 码 的 结构 非常 简单 ， 这 里 不 再 说 明 。 


20.7 | OpenSocial 


为 了 对 抗 Facebook， 以 Google 为 首 的 公司 推出 了 OpenSocial 这 一 开放 式 Web API 标准 。 在 执笔 本 











书 时 ，OpenSocial v2.0 的 标准 正在 制订 过 程 中 。 目 前 ，OpenSocial 在 技术 上 远 落 后 于 Facebook API， 仅 








处 于 追赶 者 的 地 位 “。 更 为 详细 的 信息 ， 请 参见 以 下 URL。 





http://www.opensocial.org/ 
http://code.google.com/apis/opensocial/ 
OpenSocial 的 API 可 以 分 为 多 种 类 型 。 


@ RESTful API ( 包括 JSON-RPC API ) 
@ JavaScript API ( 包括 插件 API ) 














按照 本 书 的 标准 ， 可 以 将 其 分 为 两 大 类 。 


四 尽管 在 美国 及 日 本 ,一 些 大 型 的 网 站 已 经 开始 引入 了 OpenSocial, 不 过 在 国内 ， 由 于 各 种 各 样 的 原因 ， OpenSocial 下 怕 无 


法 得 到 普及 。 同 时 ， 国 内 的 腾讯 、 新 浪 等 公司 也 正在 推广 自己 的 Web API。 





译 者 注 
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RESTful API 相当 于 表 19.1 中 的 HTTP API。 它 又 包含 了 RESTful 设计 风格 的 API 与 基于 JSON-RPC 








F 





的 API 这 两 种 类 型 。 在 标准 中 并 没 











规定 必须 对 JSONP 提供 支持 ， ee 是 对 容器 进行 实 





























现 的 开发 者 的 自由 。 不 过 ， 下 一 节 也 会 讲 到 ， 当 前 ，OpenSocial 的 目标 运行 架构 并 不 会 产生 路 源 限 制 问 


题 ， 因 此 ， 即 使 不 支持 JSONP， 也 不 会 有 什么 问题 。 




















通过 客户 端 JavaScript 来 使 用 OpenSocial 时 ， 通 常会 使 用 JavaScript API 的 方式 。 根 据 表 19.1 中 的 分 


类 ， 这 相当 于 语言 API。 本 节 将 只 说 








明 OpenSocial 的 JavaScript API。 


加 OpenSocial 的 基本 架构 | 


OpenSocial 的 早期 原型 是 iGoogle， 因 此 ，OpenSocial 的 基本 架构 是 基于 容器 与 搬 件 的 。 如 图 20.18 
与 图 20.19 所 示 ， 它 主要 有 两 种 主要 的 形式 。 可 以 将 这 两 种 形式 分 别 命名 为 frame 型 与 代理 型 ， 它 们 分 
别 对 应 于 图 20.12 与 图 20.13 所 示 的 Facebook 应 用 类 型 。 


| 图 20.18 OpenSocial 的 基本 架构 ( iframe 型 ) 
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(@iframe 响应 
插件 





OpenSocial 容器 
的 ) 第 三 方 应 


一 一 一 HTMLS B= 下 As 昌 


人 创建 一 个 嵌入 了 iframe 的 HTML 
OpenSocial 容器 的 Web API 




















0 th 













有 Web API 














| 图 20.19 ”OpenSocial 的 基本 架构 ( 代理 型 ) 

















95) 响应 
























JavaScript API 


插件 (iframe) 





OpenSocial 容器 
用 户 a _( 服务 提供 者 ) 第 三 方 应 


允 十 二 二 


OpenSocial 容器 的 Web API 























@ 请 求 > 
@ 响 应 中 


用 创建 一 个 能 入 了 iframe 的 HTML 











本 书 将 不 会 介绍 iframe 型 。 这 是 
代理 型 则 将 默认 使 用 JavaScript API。 
容器 充当 了 中 介 者 上 


转 Google Friend Connect 























< 






































因为 ，iframe 型 的 架构 通常 是 用 于 服务 器 端的 OpenSocial 调用 中 的 。 
可 以 以 任意 的 第 三 方 服务 器 来 托管 该 插件 。 从 浏览 器 的 角度 来 看 ， 














9 色 ， 因 此 ， 所 谓 的 客户 端 JavaScript 跨 源 限制 问题 也 就 不 存在 了 。 








为 了 与 Facebook Connect 竞争 , 出 现 了 Google Friend Connect 这 一 API "。Facebook Connect 是 一 种 基 














于 Social Plugin 的 技术 ， 前 一 节 已 经 介绍 过 。 它 隐藏 了 OAuth 用 户 代 理 流 程 以 及 跨 源 通信 问题 。 这 一 语 


























言 API 其 至 还 隐藏 了 插件 API。OpenSocial 也 很 可 能 会 以 此 为 方向 发 展 ， 那 样 的 话 ， 其 基本 架构 将 会 逐 





Q@ 最 近 ， Google 为 构建 自己 的 SNS 而 进行 


了 大 量 努 力 。 更 为 详细 的 内 容 ， 请 参见 Googlet 相关 的 参考 文档 。 





译 者 注 
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渐 从 图 20.19 转变 为 图 20.15 的 形式 。 
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如 图 20.19 所 示 ， 在 OpenSocial 中 ,插件 是 在 容器 内 显示 的 。 搬 件 本 质 上 是 一 种 通过 XML 描述 的 定 





义 文件 。 代 码 清 单 20.14 是 其 原型 定义 。 
| 代码 清单 20.14 ”OpenSocial 插件 的 原型 定义 


=oxml vens on no ee 
<Module> 





<ModulePrefs title=" 插件 的 标题 "> <!-- 可 以 将 属性 指定 为 作者 信息 或 插件 尺寸 等 内 容 --> 


<Require feature="osapi"></Require> 
在 这 里 声明 所 需 的 OpenSocial feature 
</ModulePrefs> 
<Content type="html"> 
<! [CDATA 








<style type="text/css"> 这 里 所 写 的 是 CSS 代码 </script> 


<seriptNtype "text/javeseripte 





这 里 所 写 的 是 JavaScript 代码 ( 可 以 使 用 OpenSocial 的 JavaScript API) 


es 

这 里 所 写 的 是 HTML 代码 

E> 

</Content> 
</Module> 


插件 是 由 通常 的 HTML ( 不 过 只 需要 写 有 body 元 素 )、CSS 及 JavaScript 等 元 素 所 构成 的 "。 容 器 将 




















对 通信 进行 中 转 ， 从 XML 中 抽出 HTML 等 内 容 ， 




















向 浏览 


器 返回 一 个 租 人 了 这 一 HTML 的 HTML 文 





件 。 广 义 的 OpenSocial 程序 设计 指 的 就 是 搬 件 的 定义 文件 的 设计 。 狭 义 的 OpenSocial 程序 设计 则 是 指 设 








计 插 件 内 的 JavaScript 代码。 


这 里 的 JavaScript 代码 将 会 在 客户 端 执 行 ， 并 能 够 使 用 OpenSocial 的 JavaScript API。JavaScript API 
包括 多 种 类 型 ， 其 中 社交 图 谱 类 API 用 于 和 OpenSocial 容 右 进行 通信 ，UI 类 API 则 用 于 操作 插件 的 UI。 





国 Apache Shindig 





Apache Shindig 是 一 种 开源 的 OpenSocial 容器 。 关 于 该 容 右 的 下 载 与 安装 方法 ,请 参见 下 面 的 URL。 


http://shindig.apache.org/ 











代码 清单 20.15 是 显示 了 Shindig 基本 界面 的 HTML 示例 。 该 基本 界面 将 会 在 指定 的 URL 中 寻找 
插件 文件 (my-gadget.xml )， 并 创建 一 个 鹏 入 了 这 一 插件 的 界面 。 需 要 将 这 段 HTML 代码 配置 于 运行 





有 Shindig 的 服务 器 上 ， 并 在 浏览 器 访问 Shindig 服务 器 时 ] 


my-gadget.xml 所 描述 的 插件 。 





打开 该 页 面 。 如 此 一 来 ， 界 面 中 就 会 显示 出 此 















































my-gadget.xml 是 插件 的 定义 文件 ， 可 以 被 配置 于 任意 的 Web 服务 器 (第 三 方 应 用 ) 上 。 它 可 以 使 用 
任意 名 称 作 为 文件 名 。 之 后 ，OpenSocial 容器 ， 也 就 是 Shindig 服务 器 将 会 获取 该 文件 。 之 后 将 会 说 到 ， 








由 于 搬 件 定义 文件 是 由 客户 端 JavaScript 代码 所 写 的 ， 
取 ， 对 此 请 加 以 注意 。 
| 代码 清单 20.15 ”通过 Shindig 在 基本 界面 中 显示 插件 


<html> 
<head><title>Simple Container</title> 








因此 








FE 一 看 ， 很 容易 误 以 为 它 会 被 浏览 器 直接 读 





<script type="text/javascript" src="/gadgets/js/shindig-container:rpc. 


js?c=1l&debug=1l&nocache=1"></script> 
<script type="text/javascript"> 





© 


并 在 ifiame 内 显示 外 部 HTML (图 20.18 的 形式 )。 


只 要 通过 代码 type="url" 将 Content 元素 的 type 设 定 为 url, 并 将 其 href 属性 设 定 为 相应 的 URL, 就 能 将 其 转换 为 一 个 插件 ， 
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EuneElon mm 
var specUrl = ' 托管 7 my-gadget .xml 的 URL'; 
var gadget = shindig.container.createGadget ({specUrl: specUrl1}); 
shindig.container.addGadget (gadget); 
shindig.container.layoutManager.setGadgetChromeIds (['my-gadget']); 
shindig.container.renderGadget (gadget)，; 

} 

/seripes 

</head> 

<bedy onload un > 
<div id="my-gadget" class="gadgets-gadget-chrome"></div> 

</body> 

</html> 








代码 清单 20.16 是 my-gadget.xml 的 最 简 形式 。 它 仅仅 是 在 代码 清单 20.14 的 原型 中 写 上 了 HTML 代 
码 而 已 。 将 代码 清单 20.15 中 ，my-gadget.xml 的 URL 设 定 为 正确 的 值 之 后 ， 就 能 在 Shindig 中 显示 该 揪 
件 ， 并 在 界面 中 显示 Hello, OpenSocial 这 一 字符 串 。 
| 代码 清单 20.16 ”简单 的 插件 定义 文件 


=xm verston=u Ou encodlng Un eu 
































<Module> 
<ModulePrefs title="my gadget"> 
</ModulePrefs> 
<Content type="html"> 
<! [CDATAT[ 


<div>Hello, OpenSocial</div> 
Uae> 
</Content> 
</Module> 


代码 清单 20.17 是 一 段 使 用 了 OpenSocial 的 JavaScript API 的 代码 示例 。 在 这 段 代码 中 ， 仅 节选 了 插 
件 定义 文件 的 Content 元 素 部 分 。 


| 代码 清单 20.17 OpenSocial 所 提供 的 JavaScript API 的 使 用 示例 


<! [CDATAT[ 
<script type="text/javascript"> 
functlon Tn (od 
osapi.people.getViewer({fields: ['displayName', 'birthday']}). 
execute (function(result) { 
se ol 
document .getElementById('content') .innerHTML = result.displayName + "'s 
birthday is " + result.birthday; 


) 
} 


gadget .util.registeronLoadHandler (init); 
eee 

<div>Hello, OpenSocial</div> 

<div id="content"></div> 


MM 

OpenSocial 的 JavaScript API 是 一 种 模块 化 的 API。 在 OpenSocial 中 ,模块 被 称 为 feature ( 特性 )。 
可 以 通过 插件 定义 文件 的 <Require> 标签 来 指定 所 需 使 用 的 feature ( 参见 代码 清单 20.14 )。 无 需 特地 声 
明 就 能 使 用 的 feature 则 被 称 为 core feature。core feature 包含 有 以 下 四 种 JavaScript API。 举 例 来 说 ， 代 三 
清单 20.17 中 的 gadgets.util.registerOnLoadHandler 函数 就 属于 这 类 API。 


















































@ gadgets.io 
@@ gadgets.util 
@ gadgets.Prefs 
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@ gadgets.json 


代码 清单 20.17 使 用 了 osapi feature 的 osapi.people.getViewer 函数 。 因 此 ， 必 须 在 插件 定义 文件 中 写 
上 feature="osapin 。 


图 其 他 Web API 的 调用 


在 OpenSocial 插件 中 通过 客户 端 JavaScript 调用 OpenSocial 容 右 的 Web API 时 ， 不 会 发 生 跨 源 限 甫 
问题 。 插 件 的 HTML 是 通过 OpenSocial 容器 接收 的 。 

OpenSocial 插件 提供 了 一 种 机 制 ， 使 通过 客户 端 JavaScript 调用 任意 的 外 部 Web API 成 为 可 能 。 这 种 
行为 自然 是 存在 跨 源 限制 的 ， 不 过 由 于 OpenSocial 容 右 充当 了 代理 中 转 ， 因 此 回避 了 跨 源 限制 问题 。 这 
里 所 要 使 用 的 API 是 gadgets.io.makeRequest 函数 。 其 第 1 个 参数 是 外 部 URL， 在 收 到 响应 时 被 调用 的 回 
调 函 数 则 将 被 传递 给 其 第 2 个 参数 。 

代码 清单 20.18 是 一 个 具体 的 例子 。 该 例 中 调用 了 Twitter 的 搜索 API。 由 于 response.data 是 JSON 
格式 的 字符 串 ， 因 此 需要 通过 gadgets.json.parse 函数 对 其 进行 分 析 ， 并 将 其 转换 为 对 象 。 也 可 以 改 用 在 
第 2 部 分 中 介绍 过 的 原生 JSON 对 象 ， 其 JSON.parse 函数 的 功能 和 它 是 一 样 的 。 

gadgets.io.makeRequest 函数 还 支持 OAuth， 因 此 ， 也 可 以 调用 需要 进行 权限 转让 的 Web API。 虽 然 
调用 是 通过 客户 端 JavaScript 进行 的 ， 但 其 实 真正 调用 了 Web API 的 是 ( 中 转 ) 服务 器 ， 因 此 ， 其 执行 
原理 与 图 19.5 所 示 的 方式 相当 。 在 执笔 本 书 时 ， 该 函数 仅 支 持 OAuth 1.0， 不 过 今后 应 该 也 会 对 OAuth 
2.0 提供 支持 “。 


| 代码 清单 20.18 ”其 他 的 Web API 调用 示例 


<! [CDRATRA 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript"> 
function doSearch() { 
gadget .io.makeRequest ('http://search.twitter.com/search.json?locale=zh&q=' + 
S(tsearchnTextr) vall() 
function(response) { 
var content = S$('#content'); 
gadgets.json.parse (response.data) .results.forEach (function(result) { 
content.append('<li>' + result.text + '</l1i>'); 


和 

















































































































































































































Dy 
} 


el 

<div>Hello, OpenSocial</div> 

<input type="text" id="searchText"></input> 
<div onclick="doSearch() "> 搜索 </div> 

<ul id="content"></ul> 


WI 


专栏 


OpenSocial 标准 文件 的 阅读 方式 及 Activity 

OpenSocial 的 标准 文件 被 分 为 了 多 个 文件 ， 要 弄 明 白 应 该 从 何 处 开始 阅读 并 不 容易 。 这 里 介绍 一 种 简章 
的 方法 。 

OpenSocial 的 标准 文件 大 致 可 以 分 为 以 下 三 类 : 定义 了 插件 XML 结构 描述 与 JavaScript API 的 标准 文件 、 
定义 了 HTTP API ( RESTful API 的 ) 的 标准 文件 , 以 及 定义 了 OpenSocial 所 允许 的 数据 结构 的 标准 文件 。 其 
中 最 有 必要 了 解 的 是 数据 结构 。 数据 结构 的 标准 文件 又 可 以 分 为 Core Data Spec 与 Social Data Spec 这 两 种 。 
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中 在 旧版 API 中 函数 前 组 为 opensocial. 而 在 新 版 API 中 则 变 为 了 osapi 前 缓 。 
© OpenSocial 目前 已 经 对 OAuth 2.0 提供 了 支持 。 译 者 注 
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前 者 定义 了 对 象 ID 及 用 户 ID 等 基本 的 数 和 











居 结 构 ， 而 Social Data Spec 则 对 OpenSocial 专 有 的 数据 结构 进行 
了 定义 。 也 就 是 说 ， 如 果 想 要 尽快 了 解 OpenSocial 的 功能 ， 阅 读 Social Data Spec 是 一 条 捷径 。 
与 目前 的 OpenSocial v1.1 相 比 ， 正 在 制订 中 的 v2.0 新 版 中 的 Social Data Spec 个 显著 的 变化 ， 将 
Activity 改 为 了 Activity Streams。 目 前 ( v1.1 ) 中 的 Activity 只 是 一 个 附 有 时 间 惟 的 文本 , 它 只 包含 与 用 户 相 
关 的 Feed 信息 。 

Activity Streams 对 人 们 的 活动 信息 做 了 进一步 结构 化 处 理 。Activity Stream 被 定义 为 ActivityEntry 的 集 
合 。 在 ActivityEntry 中 ， 含 有 actor ( 谁 ) verb (做 了 什么 )、object ( 行为 的 对 象 )、target ( 结果 ， 对 象 的 
现状 ) 等 基本 元 素 。Activity Streams 将 会 成 为 一 种 标准 的 数据 交换 格式 ， 以 描述 人 们 的 活动 信息 。 
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服务 器 端 JavaScript 


回顾 历史 ，JavaScript 都 是 以 客户 端 JavaScript 
为 主 ， 以 浏览 器 为 主要 运行 环境 的 。 随 着 
JavaScript 的 流行 ， 服 务 器 端 JavaScript 也 逐渐 
发 展 起 来 。 本 部 分 将 分 别 介绍 CommonJS 这 一 
服务 器 端 JavaScript 的 标准 API， 以 及 Node.js 
这 种 具有 代表 性 的 具体 实现 。 
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服务 器 端 JavaScript 


服务 器 端 JavaScript 与 


Node.js 





本 章 将 介绍 服务 器 端 


服务 器 端 


JavaScript 的 动向 以 及 CommonJS 这 一 标准 APl。 
JavaScript 中 发 展 最 为 迅猛 的 Node.js 的 基本 信息 。Node.js 基于 v8 这 


JavaScript 实现 ， 并 且 可 以 以 异步 处 理 的 方式 来 描述 可 扩 放 的 服务 器 。 


| 21.1 | 服务 器 端 JavaScript 的 动向 


会 说 明 
高 速 的 


a 





如 今 ， 在 服务 器 端 使 用 
经 出 现 过 服务 器 端 JavaScript， 不 过 之 后 被 废止 了 。 过 去 ， 
服务 器 端 JavaScript 开发 Web 应 用 
器 端 JavaScript 技术 也 退出 了 公众 视线 。 之 后 ，Java 与 .NET 成 为 了 主流 的 商业 服务 器 端 开发 语言 ， 
I 是 主流 的 开源 服务 器 端 开发 语言 。 


Enterprise Server, 


Perl、PHP 、Ruby 及 Python 等 由 
今天 ， 服 务 器 端 JavaScript 

















各 种 各 样 的 具体 实现 。 








JavaScript 语言 的 繁荣 ， 











对 通过 




















JavaScript 的 做 法 正 越 来 越 受 到 人 们 的 关注 。 








回顾 过 去 ， 我 们 会 发 现 历史 上 曾 
网 景 公司 开发 的 收费 Web 应 用 服务 器 Netscape 









































提供 了 支持 。 随 着 网 景 公 


司 的 衰弱 ， 服 务 
而 





次 受到 瞩目 。 此 前 ， 只 有 网 景 公司 推 

















JavaScript 实现 ， 为 服务 器 端 JavaScript 的 运行 提供 了 保证 。JVM 语言 的 优点 在 


特性 。 


一 些 无 法 通过 JavaScript 实现 的 功能 


， 可 以 借助 Java 完 


合 之 后 ， 在 服务 器 端 使 用 JavaScript 进行 开发 的 阻碍 就 减 小 了 很 多 。 


之 后 出 现 了 Node.js。 它 的 特点 是 使 用 了 v8 这 一 Google 公司 开发 的 高 速 JavaScript 实现 ， 
步 网 络 处 理 。 通 过 Node.js 可 以 开发 出 可 扩 放 性 很 强 的 Web 应 月 
此 外 ， 我 们 也 不 能 忽略 处 于 云 计算 中 心 的 Google 公 
该 会 有 越 来 越 多 的 Web 应 用 ， 
































了 





| 21.2 | Commonys 


出 了 相关 产品 ， 


而 现在 已 经 出 现 了 


自然 是 服务 器 端 JavaScript 逐渐 繁 末 的 一 个 重要 原因 。 正 如 本 书 第 1 部 分 
所 述 ，AJAX 与 HTML5 的 出 现 为 此 提供 了 基础 。 而 另 一 个 重要 原因 ， 
中 的 JVM 语言 的 发 展 。 在 Java6 中 


则 是 运行 于 Java 虚拟 机 (JVM ) 
，Java 脚本 API 成 为 了 一 种 标准 API。Rhino 这 一 移植 至 JVM 中 的 
于 它 可 以 使 用 Java 的 一 些 














成 。 与 已 经 广泛 用 于 服务 器 端的 Java 相 结 





并 支持 异 





， 因 此 它 受到 了 广泛 关注 。 
\ 司 所 开发 的 Google Apps Script 技术 。 
选择 服务 器 端 JavaScript 作为 其 扩展 语言 。 


， 应 





加 | 21.2.1 CommonyJS 的 定义 
正如 第 3 部 分 所 讲 ， 在 客户 端 JavaScript 中 ,已 经 有 DOM 这 一 扩展 API 的 事实 标准 。 而 在 服务 器 端 








JavaScript 中 
服务 器 端 jt 
繁 的 自 
准 API。 








， 并 没有 这 样 的 标准 
中 甚至 不 存在 标准 
定义 API 对 于 开发 者 和 库 的 使 月 

不 过 CommonJS 只 会 制订 API 的 标准 ， 之 后 以 CommonJS 为 标准 的 JavaScript 实现 将 会 根据 这 
一 标准 提供 相应 的 API 具体 实现 。 
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。 目前 ， 








大 部 分 服务 器 端 JavaScript 都 提供 了 其 自 定义 的 API 实现 。 在 








的 文件 读 取 API， 这 在 其 他 程序 设计 语言 
日 者 来 说 ， 都 是 一 种 负担 。 因 此 ， 人 们 开始 
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制订 CommonJS 这 一 标 
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CommonJS 出 现 于 2009 年 初 ， 是 一 种 新 的 技术 。 最 早 它 使 用 了 ServerJS 这 一 名 称 。 如 名 称 所 示 ， 它 
的 目的 是 制订 出 一 种 服务 器 JavaScript 的 标准 API。 之 后 ， 诸 如 通过 JavaScript 实现 的 命令 行 工具 或 GUI 
工具 等 服务 器 端 之 外 的 用 途 也 被 加 入 ， 于 是 ServerJS 改名 为 CommonJS。 大 家 可 以 在 以 下 的 站 点 中 获取 
更 多 信息 。 


http:/www.commonjs.org/ 





























http://wiki.commonjs.org/Wwiki/CommonJS 


CommonJS 还 有 一 种 名 为 JSGI 的 相关 标准 。CommonJS 的 API 提供 了 包括 文件 操作 等 基本 功能 ， 相 
当 于 Java 中 java.lang 及 java.util 包 中 所 涉及 的 API。 而 JSGI 则 是 用 于 Web 应 用 的 API， 相 当 于 Java 中 
的 Servlet API。 
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与 宿主 对 象 无 关 的 库 

jQuery 与 prototype.js 是 两 种 著名 的 JavaScript 库 。 他 们 都 被 用 于 客户 端 JavaScript 中 。 它 们 没有 提供 
浏览 器 UI 相关 的 功能 ， 并 且 只 能 用 于 全 局 对 象 是 window 对 象 的 情况 。 

随 着 服务 器 端 JavaScript 的 繁荣 ， 渐 渐 出 现 了 一 些 与 宿主 对 象 无 关 的 类 。 例 如 ，underscore.js ( http:/ 
documentcloud.github.com/underscore/ ) 就 是 其 中 的 代表 之 一 。 





























































































































国 21.2.2 CommonJS 的 动向 | 


如 今 ， 很 多 库 和 框架 都 是 以 CommonJS 为 标准 的 ， 在 服务 器 端 JavaScript 领域 也 是 如 此 。 本 章 将 要 
介绍 的 Nodejs 便 是 其 中 之 一 。 此 外 ，JVM 类 型 的 服务 器 端 JavaScript 中 的 Narwhal 及 RingoJS ， 支 持 
JavaScript 实现 的 文档 型 数据 库 CouchDB 等 ， 也 都 符合 Common]JS 标准 。 其 他 的 一 些 客户 端 JavaScript 
框架 ， 如 SproutCore 也 表示 将 会 遵循 CommonJS 标准 。 

不 过 ，2009 年 初 ，Common]JS 的 标准 化 进程 并 非 一 帆 风 顺 ， 进 展 顺 利 的 只 有 接 下 来 将 要 介绍 的 模块 
API 标准， 出 现 了 很 多 模块 API 的 具体 实现 。 但 对 于 其 他 的 API， 无 论 是 标准 的 标准 化 ， 还 是 具体 实现 
的 开发 ， 痢 没有 什么 进展 。 更 为 糟糕 的 是 ， 服 务 器 端 JavaScript 中 发 展 势 头 最 好 的 Node.js 原本 是 以 异步 
API 为 核心 的 ， 因 此 ， 很 难 和 CommonJS 中 传统 的 同步 API 保持 统一 。 
目前 ， 主 流 的 具体 实现 (如 Node.js 及 underscore.js 等 ) 中 的 API， 以 及 来 自 于 客户 端 ( 如 jQuery 及 
HTML5 等 ) 的 API， 构 成 了 服务 器 端 JavaScript API 的 事实 标准 ，CommonJS 应 该 也 会 在 今后 逐步 吸收 
这 些 API。 从 长 远 来 看 ， 一 定 会 出 现 CommonJS 这 样 的 标准 。 


国 21.2.3 模块 功能 | 


在 CommonJS 中 ， 只 有 模块 功能 的 标准 化 及 其 具体 实现 的 开发 工作 取得 了 进展 。 本 节 将 先 说 明 需 要 
有 标准 化 模块 的 原因 。 之 后 还 会 介绍 CommonJS 中 模块 API 的 使 用 方法 。 
转 需要 模块 功能 的 原因 

如 果 程 序 设计 的 规模 达到 了 一 定 程度 ， 则 必须 对 其 进行 模块 化 。 模 块 化 可 以 有 多 种 形式 ， 但 至 少 应 
该 提供 能 够 将 代码 分 割 为 多 个 源 文 件 的 机 制 。 

在 客户 端 JavaScript 中 ， 我 们 可 以 通过 HTML 的 script 标签 来 读 取 多 个 JavaScript 文件 。 虽然 也 可 以 
将 其 理解 为 一 种 模块 化 机 制 ， 但 这 并 不 是 JavaScript 语言 所 提供 的 功能 。 从 程序 设计 语言 的 角度 来 看 ， 通 
过 script 标签 读 取 文 件 ， 其 实 只 是 把 文件 连接 了 起 来 而 已 。 此 即 所 谓 的 包含 ( include ) 机 制 。 



































































































































图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 


@@ 354 一 一 一 第 6 部 分 服务 器 端 JavaScript 





通过 这 一 机 制 将 JavaScript 代码 分 割 为 多 个 文件 后 ， 可 能 会 因为 全 局 命名 空间 受到 污染 而 产生 名 称 
冲突 的 问题 。 于 是 ， 随 着 具有 依赖 关系 的 外 部 库 的 增加 ， 这 一 问题 将 变 得 越 来 越 难以 处 理 。 对 于 客户 端 
JavaScript 来 说 ,我们 可 以 通过 在 6.7.4 节 中 所 介绍 的 方法 ， 以 及 对 每 一 个 库 使 用 不 同 的 名 称 空间 ， 来 解 
决 这 个 问题 。 

在 服务 器 端 JavaScript 中 ， 我 们 也 可 以 通过 包含 的 方式 ， 将 多 个 源 文 件 连 接 起 来 。 不 过 ， 随 着 文件 数 
量 的 增加 ， 通 过 包含 进行 连接 的 方式 将 变 得 难以 管理 。 为 了 解决 这 一 问题 ， 我 们 可 以 使 用 Common]JS 的 
模块 功能 。CommonJS 中 模块 的 区 分 单位 取决 于 具体 的 实现 方式 。 不 过 通常 都 会 以 文件 为 单位 。 本 书 将 
说 明 以 一 个 模块 对 应 一 个 文件 的 原则 。 

图 模块 的 具体 示例 

本 书 中 的 说 明基 于 CommonJS 模块 标准 1.1.1 版 。 

在 默认 情况 下 ，CommonJS 模块 不 会 对 全 局 命名 空间 造成 污染 。 在 结合 两 个 源 文件 时 ， 只 要 其 中 某 
一 个 文件 没有 输出 其 变量 名 及 函数 名 ( 之 后 将 会 详 述 )， 这 些 名 称 对 于 另 一 个 文件 来 说 就 是 不 可 见 的 

本 节 之 后 将 依次 介绍 模块 部 分 代码 的 书写 方式 及 读 取 模块 的 代码 的 书写 方式 。 在 作为 模块 读 取 的 代 
人 码 中 ， 会 预先 创建 exports 与 module 这 两 个 对 象 。 由 于 所 有 文件 都 可 以 作为 模块 读 取 ， 因 此 其 实 每 个 文 
件 中 都 隐 式 地 创建 了 exports 与 module 对 象 。 为 了 使 这 些 文件 能 够 被 作为 模块 使 用 ， 必 须 设 置 这 些 对 象 
的 属性 。 

exports 对 象 的 属性 名 称 是 对 模块 外 部 公开 的 。 我 们 可 以 按照 代码 清单 21.1 的 方式 来 使 用 这 些 属性 
(假定 该 文件 的 文件 名 为 calcjs )， 可 以 在 源 代码 中 的 任意 位 置 对 exports 的 属性 进行 赋值 。 


| 代码 清单 21.1 ”将 文件 作为 模块 调用 ( calcjs ) 
// 设置 模块 中 向 外 部 公开 的 名 称 


Exports.sum = sum; 
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Funoeon SEE 
return Number(a) + Number (b); 
} 


这 样 一 来 ， 我 们 就 能 在 其 他 文件 中 调用 sum 函数 了 【本 节 之 后 将 说 明 使 用 模块 的 范例 代码 )。 

在 module 对 象 中 ， 有 两 个 只 读 属 性 id 与 url。 它 们 的 值 都 与 模块 名 称 相同 。 模 块 名 称 被 用 于 识别 模 
块 。 如 果 模 块 以 文件 为 单位 ， 在 这 一 前 提 下 ， 可 以 认为 模块 名 就 等 同 于 文件 名 。 目 前 ， 通 过 id 属性 的 值 
来 获知 模块 名 称 是 可 行 的 。 
园 在 代码 中 使 用 模块 

本 节 将 说 明 如 何 使 用 模块 。 我 们 可 以 通过 require 函数 来 使 用 模块 。 例 如 ， 可 以 像 下 面 这 样 来 使 用 前 
一 节 中 的 calc.js。 需 要 将 模块 名 传递 至 require 函数 。 关 于 console.log 的 相关 说 明 ， 请 参见 21.3 节 。 

// 在 代码 中 使 用 模块 的 示例 


var calc reaqulirsel(lceale 
oonsoles lo (ale Ss um se: 


我 们 也 可 以 以 下 面 这 样 的 方式 来 使 用 (不 过 这 并 不 是 模块 特有 的 用 法 ， 而 是 JavaScript 所 具有 的 
用 法 )。 
// 在 代码 中 使 用 模块 的 示例 


Var Sum = require('calc') .sum; 
console.log(sum(4, 5)); 


将 模块 名 传递 给 了 require 函数 之 后 ， 函 数 将 会 查找 与 之 对 应 的 文件 。 其 查找 方式 取决 于 具体 的 实 
现 。 是 否 要 在 传递 给 require 函数 的 模块 名 之 后 添加 扩展 名 js， 也 是 由 具体 的 实现 决定 的 。 在 Node.js 这 
样 的 实现 中 ， 是 否 添加 扩展 名 都 没有 问题 ， 而 在 有 些 实现 中 ， 则 会 发 生 错 误 。 文 件 的 查找 路 径 也 取决 于 
























































































































































图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 


第 21 章 服务 器 端 JavaScript 与 Node.js 





355 @ 





具体 实现 。 有 些 实现 会 在 当前 文件 夹 中 查找 ， 男 一 些 则 不 是 这 样 。 


如 果 是 在 当 
对 其 进行 读 取 。 











前 文件 夹 中 查找 文件 ， 只 要 将 calc.js 文件 置 于 当前 文件 夹 中 ， 就 能 够 通过 require('calc') 
如 果 没 有 默认 在 当前 文件 夹 中 查找 (Node.js 便 是 如 此 )， 则 不 能 使 用 require('calc'”))， 而 























要 改写 为 require(.calc)。 如 果 将 文件 放 在 了 名 为 sub 的 子 文件 夹 中 ， 则 需要 写成 require('sub/calc') 或 


require('./sub/calc')。 


妇 


Fe 


有 果 没 有 找 





到 所 指定 的 模块 ，require 函数 将 会 抛 出 一 个 Error 异常 对 象 。 一 个 模块 可 以 ruquire 另 一 











个 模块 。 即 使 模块 间 进行 了 循环 调用 ， 也 不 会 有 任何 问题 。 


图 模块 的 应 用 
require 函数 


module 对 象 作 等 值 比较 ， 以 判断 该 文件 是 否 是 被 直接 执行 ， 或 者 以 模块 的 形式 被 读 取 。 


if (require 


console.log('directly called'); 


} else { 








1 














mT 
Oy 














好 | 


( Function 对 象 ) 有 两 个 属性 ， 分 别 是 main 与 paths。 可 以 像 下 面 这 样 ， 将 main 属性 




















.main === module) { // 如 果 文 件 是 被 直接 执行 的 ， 则 为 
// 如 果 文 件 是 被 作为 模块 来 读 取 的 











console.log('loaded as a module'); 


} 











require.paths 属性 的 值 是 一 个 数组 ， 它 含有 模块 的 查找 路 径 。 可 以 通过 下 面 的 手段 ， 在 运行 时 更 改 模 


块 文件 的 查找 路 
然 有 这 一 功能 ， 








径 。 不 过 ,我 们 并 不 推荐 这 种 做 法 (至少 在 Nodejs 中 不 推荐 ) 不 过 ， 在 当前 代码 中 仍 
因此 我 还 是 会 介绍 一 下 。 

















// 不 推荐 使 用 这 种 方法 


1 Ty, 


require.pat 


| 21.3 | 


更 改 模块 文件 的 查找 路 径 
hs.unshift( dirname + '/subdir'); // _dirname 是 Node .js 所 特有 的 





Node.js 





转 213.1 


本 节 将 介绍 


Node.js 概要 | 
Nodejjs 这 种 服务 器 端 JavaScript。 本 书 第 4 部 分 的 WebSocket 对 此 也 略 有 提 及 。Node.js 





是 一 种 以 异步 处 理 为 特点 的 JavaScript 实现 "。 其 站 点 的 URL 如 下 。 


http://nodejs.org 


Node.js 具有 以 下 特征 。 





@ 以 v8 作为 JavaScript 实现 ( 至 于 网 络 方面 ， 则 使 用 了 libev 或 libeio 等 已 有 的 C 库 )。 
@ 在 实现 中 提供 了 通用 的 异步 处 理事 件 循 环 。 

@ 附带 支持 会 话 式 壳 层 的 命令 行 工具 。 

@ 可 以 通过 包 系统 扩展 。 


最 近 ， 在 提 











到 服务 器 端 技术 时 ， 我 们 指 的 常常 是 Web 应 用 层 。 相 较 于 通常 的 Web 应 用 服务 央 层 ， 























Node.js 是 一 种 处 于 更 低层 的 软件 。 





其 他 的 服务 








器 端 JavaScript， 通 常 都 能 够 在 Apache 等 已 有 的 Web 服务 器 ,或 Tomcat 等 已 有 的 Java 






































Servlet 引擎 中 运行 。 然 而 ， 在 通过 Node.js 开发 Web 应 用 时 ，Node.js 可 以 覆盖 从 HTTP 服务 器 层 至 Web 应 
































用 服务 器 层 的 范围 。 下 一 音 还 将 介绍 Express， 通 过 这 一 方式 ， 我 们 甚至 能 够 使 用 Nodejs 来 构建 Web 应 用 





























中 根据 FAQ 的 说 明 (https://github.com/joyent/node/wiki/FAQ )， 其 正式 名 称 既 不 是 node， 也 不 是 Nodejs， 而 是 Node。 不 
过 ， 为 了 提高 可 识别 性 ， 也 能 够 使 用 Nodejs 这 一 名 称 。 在 本 书 中 ， 将 统一 使 用 Node.js 的 称 法 。 
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程序 框架 。 





因此 ， 理 应 将 Nodejs 定 


服务 器 端 JavaScript 











其 核心 的 JavaScript 实现 v8 
的 功能 ( 当然 ， 要 达到 成 熟 还 有 很 大 差距 )。 
3 服务 器 端 JavaScript。 无 论 是 
恨 如 绑 定 了 GUI 库 )， 都 可 以 通 
F Nodejjs 版 本 0.4.8 写成 的 。 对 Nodejs 安装 方法 的 说 明 就 此 省 略 。 在 targz 类 型 的 
F 中 同时 包含 了 所 需 的 库 (v8 及 libev 等 ) 的 源 文件 。 在 GNU/Linux 中 , 了 


a 


后 





这 样 的 脚本 语 


本 书 将 以 Node.js Web 应 


是 命令 行 工具 还 是 


本 书 的 内 容 是 基 了 
源 文人 
make 来 编译 。 
园 第 三 方 模块 
围 
URL。 


做， 











绕 着 Nodejs， 有 很 多 活跃 的 开发 社 


2 





结合 node 这 














介 旨 


开发 为 中 心 ， 
GUI 工具 (1 























区 





http://github.com/ry/node/wiki/modules 


大 全 一 一 
二 了 二 > 


很 多 
国 Node.js 的 API 





为 了 便于 理解 ， 本 章 在 




















我 们 可 以 通过 下 














方 模块 都 是 以 包 为 单位 发 布 的 。 关 于 包 的 详 


介绍 














自 


Go 








http://nodejs.org/docs/latest/api/index.html 
该 API 文档 仅 介绍 了 宿主 对 象 及 标准 发 布 版 中 所 含 的 模块 API。 得 益 于 丰富 的 外 部 模块 ，Node.js 有 











着 强大 的 扩展 性 。 关 了 





这些 乡 





图 异步 处 理 与 非 阻塞 处 理 
在 此 ， 我 们 来 整理 一 下 Node.js 中 出 现 的 一 些 容易 混淆 的 术语 。 





首先 是 阻塞 与 非 阻 塞 这 两 个 术语 。 这 两 个 术语 可 以 


方式 的 描述 中 。 
阻塞 式 函 数 可 以 在 


函数 内 保持 等 待 状态 。 


位 为 一 种 与 Perl 或 Ruby 等 脚本 语言 


。 关 于 具有 代表 性 的 


得 Node.js 的 API 参考 文档 。 








于 同一 层 





看 的 软件 。 将 库 层 置 于 




















一 命令 行 工具 ， 












































过 NodeJjs 实 


就 能 使 Nodejs 获得 等 同 于 Perl 或 Ruby 


邮件 服务 器 还 是 名 称 服务 
现 。 





成 们 可 以 通过 configure 与 


第 三 方 模块 ， 大 家 可 以 参见 下 面 的 
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Cy 











信 |, 











本 章 之 后 将 会 和 npm 一 起 说 明 。 





API 时 ,将 使 用 “类 ”这 一 术语 。 相 关 术 语 的 

在 对 类 进行 说 明 的 参考 文档 中 ， 通 常 都 会 记载 类 所 
中 ， 还 包括 了 类 与 对 象 所 能 触发 的 事件 ， 以 及 事件 所 对 
读 源 代码 ， 只 能 通过 参考 文档 来 了 解 这 些 信 ， 
而 的 URL ， 者 


Fi 








民 
上 





























法 ， 请 参见 2.5.7 节 。 


性 ( 域 以 及 方法 ) 的 一 览 表 。 在 Nodejs 的 文档 
[应 的 回调 函数 的 参数 信息 等 说 明 。 目 前 ， 除 了 阅 





部 模块 的 信息 ， 则 需要 参见 其 各 自 的 API 参考 文档 。 

















于 描述 处 理 的 调 























| 方式， 通常 被 用 








函数 调 











二 








与 之 相对 地 ， 非 阻塞 式 函 数 没 有 等 待 状态 。 在 获取 某 些 资源 时 ， 将 会 进入 等 待 状态 。 从 运行 层面 来 


看 ， 


IO 等 待 于 锁 (lock ) 等 
同步 处 理 与 异步 处 理 的 含义 与 其 所 描述 的 对 象 相 关 。 对 于 Node.js 来 说 ， 可 以 将 其 型 


待 是 党 


见 的 等 待 类 型 。 

















E 解 为 用 于 描述 














IO 处 理 的 术语 。 同 步 IO 处 理 在 开始 读 取 或 写 人 操作 后 ， 就 无 法 进行 其 他 操作 ， 直 至 处 理 结束 。 在 进行 


同步 IO 人 处 型 
内 存 。 这 种 方式 先 在 表 





E 时 ， 读 取 操 作 


入 消 人 


吊 帅 全 
厢 上 完成 了 处 理 ， 从 而 使 特 




















取决 于 该 函数 是 阻塞 式 


异步 处 理 则 会 在 后 台 进 行 读 写 操作 “。 狭 义 的 异步 读 取 操 作 ， 会 在 读 取 完成 





函数 还 是 非 阻塞 式 函 数 。 





定 的 数据 已 经 被 读 取 至 了 内 存 。 而 广义 的 异步 读 取 操作 ， 将 在 能 够 读 取 时 触发 





中 当然 ， 其 内 部 还 需要 一 定 的 时 间 真 正 完成 处 理 。 


© 
执行 异步 I/O 处 理 的 后 





译 


台 是 操作 系统 (内核 )。 


引起 等 待 。 话 虽 如 此 ， 在 进行 写 入 操作 时 ， 通 





能 获得 了 提升 "。 而 在 组 





者 注 


对 于 应 用 程序 来 说 ， 这 里 的 “后 台 ” 一 词 ， 有 时 指 的 是 操作 系统 ( 内 核 )， 有 时 指 的 是 程序 中 其 他 的 线程 














通常 会 将 数据 写 入 缓冲 区 


























! 区 写 满 后 是 否 需要 等 待 ， 则 





时 触发 事件 。 这 时 ， 所 指 
和 人 件 ， 应 用 会 在 处 理 该 事 





在 Node.js 中 ， 
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件 的 过 程 中 进行 读 取 操 作 。 

异步 写 和 人 操作 将 会 准备 一 块 内 存 空间 ， 作 为 写 入 数据 的 缓冲 区 。 在 写 人 完成 时 ， 将 会 触发 事件 。 这 
一 事件 也 隐 含 了 缓冲 区 内 存 中 存在 空闲 空间 ， 可 以 写 入 新 的 数据 的 含义 。 广 义 的 异步 写 和 操作， 将 会 在 
可 以 进行 实际 的 写 入 操作 时 触发 事件 ， 并 在 事件 的 处 理 过 程 中 进行 写 入 操作 。 

下 面 ， 我 们 来 总 结 一 下 以 上 关系 。 网 络 IO 处 理 本 质 上 是 一 种 具有 等 待 状态 的 处 理 。 因 此 ， 通 过 同 
步 IO 执行 网 络 处 理 的 函数 ， 其 实 是 一 种 阻塞 式 的 函数 。 同 步 的 网 络 WO 处 理 就 等 同 于 阻塞 式 函 数 处 理 ， 
这 是 必然 的 情况 。 

另 一 方面 ， 异 步 IO 处 理 的 含义 则 更 为 广泛 ， 实 现 方式 也 较为 多 样 。 通 常 ， 异 步 数 据 读 写 函数 都 是 
非 阻 塞 式 的 。 不 过 ， 理 论 上 ， 将 数据 读 写 状态 的 检查 函数 (peek 操作 ) 与 阻塞 式 的 读 写 函数 相 结 合 ， 也 
能 够 实现 异步 VO 处 理 。 因 此 ， 在 异步 IO 处 理 中 并 非 必须 要 用 非 阻 塞 式 的 函数 。 正 如 之 前 所 说 ， 事 件 被 
触发 时 的 实现 方式 也 有 和 多 种 类 型 。 不 过 ， 在 实际 中 ,我们 通常 都 会 将 异步 IO 处 理 与 非 阻 塞 式 函数 作为 
同一 种 概念 使 用 。 

对 于 网 络 处 理 这 类 必然 存在 等 待 的 情况 ， 如 果 要 实现 并 行 处 理 ， 则 必须 使 用 多 线程 或 异步 处 理 等 机 制 。 
图 Node.js 中 异步 处 理 的 执行 方式 

先 不 考虑 概念 上 的 问题 ， 仅 从 其 实现 方式 来 看 ， 异 步 处 理 中 的 读 取 操 作 和 写 入 操作 是 不 对 称 的 。 这 
是 因为 ， 在 异步 处 理 中 通常 会 使 用 一 块 内 存 空 间 来 作为 读 写 缓冲 区 。 此 时 ， 将 以 内 存在 读 写 操作 中 不 会 
发 生 阻塞 为 前 提 进 行 讨论 。 

在 Nodejs 中 ， 异 步 写 入 处 理 是 通过 方法 调用 来 执行 的 ( 这 些 方法 通常 名 为 write )。 方 法 在 被 调 月 
后 ， 基 本 上 不 会 发 生 阻塞 就 能 立即 返回 。 也 就 是 说 ， 这 些 是 非 阻 塞 式 的 方法 〈 函数 )。 实 际 的 写 人 操作 是 
在 后 台 异 步 进行 的 。 对 于 网 络 来 说 ， 则 会 进行 数据 发 送 操作 ( 图 21.1 )。 
图 21.1 异步 /O 处 理 ( 写 入 ) 

异步 写 入 

Node.js 应 Node.js ”OS ( 内核) 
缓冲 区 ( 内 存 ) 
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write 方法 调 
写 入 缓冲 区 后 立即 返 
在 后 全 进行 发 送 操 作 ， 


应 用 可 以 进行 其 他 处 
事件 处 理 程序 
当 缓 冲 区 被 清空 ， 会 发 生 drain 事 
时 间 
































此 时 Node.js 



































操作 系统 在 后 全 进行 处 理 
Sy 
~ : 网 络 数据 发 送 操作 


认为 只 要 在 写 人 操作 结束 时 触发 事件 ， 并 在 事件 中 进行 下 一 个 写 人 操作 即 可 的 想法 ， 是 一 种 很 常见 
的 错误 。 这 种 方式 的 效率 十 分 低下 。 正 确 的 做 法 是 ， 在 写 入 操作 完成 前 ， 就 直接 依次 调用 写 入 方法 ( 函 
数 )。 不 必 在 意 实际 在 何 时 执行 写 入 操作 的 ， 只 需 将 数据 写 入 缓冲 区 即 可 。 不 过 ， 如 果 所 写 入 的 数据 非常 
大 ， 人 情况 则 会 有 所 不 同 。 如 果 写 人 操作 始终 比 实际 的 发 送 操作 更 快 ， 缓 冲 区 体积 就 会 越 来 越 大 ， 可 能 会 
占据 过 多 的 内 存 空间 。 这 种 情况 下， 就 需要 进行 一 些 复 杂 的 控制 处 理 ， 要 暂停 对 写 和 人 处理 的 调用 ， 并 等 
待 缓存 清空 的 事件 发 生 。 

在 Nodejs 中 ,没有 (诸如 read 之 类 的 ) 与 异步 读 取 处 理 相对 应 的 函数 或 方法 。 非 要 说 的 话 ， 只 有 
resume 这 类 的 方法 ， 它 的 作用 是 用 于 解除 读 取 事件 的 等 待 。 读 取 操作 是 通过 事件 所 对 应 的 回调 函数 来 执 
行 的 。 该 事件 名 通常 为 data。 在 后 台 完 成 了 读 取 操作 之 后 ， 数 据 就 进入 了 内 存 ， 这 时 将 会 调用 回调 函数 。 
回调 函数 的 参数 将 接收 所 读 取 的 数据 。 如 果 读 取 操作 还 在 进行 ， 则 会 继续 依次 调用 回调 函数 。 这 时 会 发 
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生 一 种 奇怪 的 反 转 现象 。 通 常 来 说 ， 在 函数 调 























] 时 ,传递 给 函数 的 参数 是 输入 值 ， 而 函数 的 返回 值 是 输 


出 值 。 不 过 ， 在 通过 回调 函数 进行 异步 处 理 时 ， 回 调 函数 的 参数 才 是 该 处 理 的 输出 值 (图 21.2 )。 
| 图 21.2 异步 1/O 处 理 ( 读 取 ) 


























异步 读 取 











Node.js 应 











事件 等 待 








( 注册 事件 处 理 程序 


Node.js OS ( 内 核 ) 
中 区 ( 内 存 ) 


一 
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在 等 待 事件 的 过 程 中 ，Node.js 应 
义 进 行 其 他 处 理 


事件 处 理 程序 


在 事件 处 理 程序 
取 的 数据 进行 处 理 时 间 



































件 发 生 


data 对 





中 ， 对 所 读 





网 络 数据 接收 操作 








以 上 就 
后 半 部 分 将 
图 模块 














是 Nodejs 中 异步 处 理 的 原理 ， 这 些 操作 都 将 会 遵循 这 里 所 说 规则 ， 请 大 家 好 好 人 掌握。 本章 的 











会 介绍 这 些 操作 的 具体 示例 。 























Nodejs 中 模块 的 基本 机 制 遵 循 了 CommonJS 的 模块 标准 ， 其 模块 的 基本 使 用 方式 (exports 及 


require ) 也 是 
有 具体 实现 决 











符合 该 标准 的 。 详 细 内 容 请 参见 前 一 节 。 
定 的 ， 本 节 将 对 其 进行 说 明 。 
































不 过 在 Nodejs 中 ,文件 的 读 取 路 径 等 方面 则 是 由 

















如 表 21.1 所 示 ， 我 们 可 以 用 三 种 方式 在 require 的 参数 中 书写 并 指定 模块 名 称 。 
表 21.1 Node.js 中 模块 名 的 指定 方式 












































相对 路 径 以 /或 ./ 起 始 的 路 径 ./foo 或 ./foo.js 
绝对 路 径 以 /起 始 的 路 径 /foo 或 /foo.js 
名 称 以 上 两 种 情况 以 外 的 方式 foo、foo.js、foo/bar 或 foo/bar.js 
模块 名 与 文件 名 的 对 应 关系 将 会 以 下 面 的 顺序 匹配 ， 并 载 和 首先 找到 的 文件 。 是 否 在 模块 名 之 后 书 
写 扩展 名 不 会 影响 操作 。 


@ 完全 一 致 的 文件 名 
@ 添加 了 扩展 名 js 的 文件 名 
@ 添加 了 扩展 名 node 的 文件 名 ( 将 会 以 二 进 制 模块 的 形式 载 入 ) 


被 指定 


的 是 绝对 路 径 ， 则 会 


绝对 路 径 ， 





了 相对 路 径 的 require 函数 ， 将 会 从 源 文件 
义 模块 名 寻找 与 该 绝对 路 径 相 匹配 的 文件 。 如 果 既 没有 使 用 相对 路 径 ， 也 没有 使 用 








则 会 以 下 面 的 顺序 查找 文件 。 











@ 如 果 与 核心 模块 的 名 称 相 一 致 ， 则 载 入 核心 模块 


@ 在 当 
@ 在 当 


前 目录 下 的 node_modules 子 目 录 中 查找 
前 目录 上 级 的 node_modules 目录 中 查找 


所 在 的 目录 开始 ， 以 相对 路 径 搜 索 文 件 。 如 果 指 定 




















( 例如 ， 当 前 目录 为 /home/inoue/nodejs/work/， 则 将 以 下 面 的 顺序 查找 
/home/inoue/nodejs/work/node_modules 


/home/inoue/nodejs/node_modules 


/home/inoue/node_modules 
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/home/node_modules 
/node_modules ) 
@ 环境 变量 NODE_PATH 所 指定 的 目录 
@ $HOME/.node_modules/ 目录 
@ $HOME/.node_libraries/ 目录 
@ Node.js 的 安装 目录 ， 即 /lib/node/ 目录 
模块 中 所 写 的 代码 将 会 在 调用 require 时 执行 。 不 过 ， 即 使 多 次 调用 了 require， 也 上 
require 所 返回 的 也 始终 是 同一 个 对 象 引 用 。 
围 module.exports 
除了 代码 清单 21.1 中 的 写法 ， 在 Node.js 中 还 常会 以 下 面 的 方式 来 使 用 模块 。 
// 和 代码 清单 21 .1 的 功能 相同 





NS 














会 执行 一 ? 


Dy 


Ee 


o 




















module.exports = { 
sum: function(a, b) { 
return Number(a) + Number (bp); 


} 
// 如 有 和 需要， 可 以 继续 添加 其 他 属性 


国 21.3.2 node 指令 | 
he 


node 指令 是 用 户 所 能 实际 接触 到 的 Node.js 实体 。 不 以 任何 参数 执行 node 指令 ， 就 能 够 启动 一 个 会 
话 式 的 壳 层 。 在 启动 了 这 一 会 话 式 壳 层 之 后 ， 就 进入 了 下 面 这 样 的 待 输入 界面 。 


elel= 





> 


可 以 在 这 里 输入 JavaScript 语句 ， 在 按 下 Enter 键 后 将 会 返回 语句 的 执行 结果 。 如 果 输 入 的 是 表达 式 
语句 ， 则 会 显示 表达 式 的 求 值 结果 。 
$ node 


LU 这 
3 





> console.log('hello'); // console.1og 的 含义 将 在 下 一 节 说 明 
hello 








在 末尾 不 添加 分 号 也 能 正常 执行 ,不 过 本 章 的 示例 将 不 会 省 略 分 号 。 之 后 ， 将 会 以 同样 的 形式 来 表 
示 node 的 会 话 式 壳 层 的 执行 结果 。 
转 文件 的 执行 

如 果 将 文件 名 传递 给 node 指令 的 命令 行 参数 ， 就 能 够 执行 文件 内 的 JavaScript 代码 。 其 使 用 方式 与 
Perl 或 Ruby 等 所 谓 的 脚本 语言 相似 。 

在 上 面 的 例子 中 ,文件 能 被 执行 的 前 提 是 ， 写 有 JavaScript 代码 的 myjs 文件 位 于 当前 目录 下 。 只 要 
在 myjs 之 前 写 上 #l/usr/bin/node 这 样 的 node 指令 路 径 ， 就 能 设置 执行 权限 位 ， 从 而 可 以 直接 运行 文件 。 

















园 21.3.3 npm 与 包 | 
在 Node.js 中 ， 有 一 种 被 称 为 Node Package Manager (npm ) 的 包 系 统 。npm 的 官方 站 点 URL 如 下 。 
http:/npmjs.org 
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可 能 有 人 会 对 模块 与 包 之 间 的 关系 感到 迷惑 ， 本 节 将 解释 两 者 的 功能 差异 。 模 块 是 由 Node.js 提供 的 
功能 ， 借 助 这 一 语言 功能 ， 我 们 能 够 将 程序 分 为 知 干部 分 。 具 体 来 说 ， 它 可 以 将 源 文件 分 割 为 多 个 文件 
以 便 管理 。 进 一 步 来 说 ， 这 是 一 种 能 够 分 割 命名 空间 的 语言 功能 。 

男 一 方面 ， 包 是 一 种 软件 发 布 机 制 。 通 常 ， 包 被 定义 为 模块 的 集合 。 理 论 上 来 说 ， 也 可 以 不 通过 模 
块 的 形式 来 构建 包 。 而 会 对 Nodejs 宿主 对 象 的 命名 空间 产生 影响 的 包 也 是 能 够 被 创建 的 。 不 过 ， 这 种 包 
的 性 质 并 不 良好 ， 因 此 ， 不 应 该 创建 这 种 类 型 的 包 。 

我 们 可 以 向 下 面 这 样 安装 npm 。 

安装 完成 后 ， 就 能 够 使 用 npm 指令 了 。npm 指令 的 基本 功能 是 搜索 包 、 安 装 及 印 载 操作 。 关 于 npm 
指令 的 使 用 方法 ， 请 参见 通过 npm help 输出 的 在 线 帮助 。 还 可 以 通过 下 面 的 URL， 搜 索 已 有 的 npm 包 。 

http://search.npmjs.org/ 

我 们 可 以 像 下 面 这 样 ， 通 过 npm 指令 来 安装 一 个 包 。 

$ npm install 包 名 

按照 上 面 的 方式 安装 的 话 ， 将 会 以 当前 目录 为 基础 ， 在 相对 路 径 中 安装 所 指定 的 包 。 像 下 面 这 样 添 
加 -g 选项 之 后 ， 就 会 执行 全 局 安装 。 


$ npm install -9 包 名 


本 章 将 在 必要 时 进一步 说 明 通 过 npm 来 安装 包 的 方法 。 


国 21.3.4 console 模块 | 


console 对 象 的 内 部 是 一 个 console 模块 的 对 象 。 默 认 情 况 下 ， 该 模块 将 会 被 载 和 人 ， 因 此， 不 需要 显 
式 地 使 用 var console = require('console') 语句 来 执行 这 一 载 入 操作 “。 

表 21.2 列 出 了 console 模块 中 的 函数 ( 从 形式 上 来 说 ， 这 些 是 console 对 象 的 方法 )。 这 些 函 数 主要 被 
用 于 调试 之 中 。 它 们 的 实现 并 不 复杂 ， 只 要 查看 Nodejs 源 文件 树 中 的 consolejs 文件 就 能 理解 。 



















































































表 21.2 console 模块 的 函数 








































































































































































































log(a,b,…) 义 标准 规格 输出 所 有 参数 ， 并 在 所 输出 的 消息 末尾 再 输出 一 个 换行 符 

info(a,b,…) 目前 只 是 log 函数 的 一 个 别名 ( 将 来 可 能 会 具有 不 同 的 功能 ) ” 

error(a,b,…) 义 标准 错误 规格 输出 所 有 参数 ， 并 在 所 输出 的 消息 末尾 再 输出 一 个 换行 符 

warn (a,b,…) 目前 只 是 error 函数 的 别名 

assert(expr) 如 果 参 数 expr 的 值 为 假 ， 则 抛 出 AssertionError 异常 

dir(opj) 检查 对 象 

tracellabel) 义 标准 错误 规格 输出 调用 栈 。label 将 用 于 输出 消息 之 中 

timellabel) 始 性 能 分 析 ( 测量 执行 时 间 ) 

timeEnd!(label) 结束 性 能 分 析 。 其 输出 结果 为 ,从 具有 相同 标签 值 的 time 函数 被 调用 起 至 今 所 经 过 的 时 间 。 会 通过 log 函 
数 输出 这 一 结果 


























对 于 消息 输出 类 的 函数 ,可 以 使 用 表 21.3 中 的 格式 指定 符 。 只 要 在 函数 第 1 个 参数 的 字符 串 中 写 上 格 
式 指 定 符 ， 就 能 够 以 一 定 的 格式 ， 将 其 与 之 后 的 参数 进行 奉 换 。 




















四 在 此 之 前 ， 请 先 完成 Node.js 的 安装 。 
@@， 从 语句 含义 的 角度 来 看 ， 这 行 语句 的 功能 相当 于 载 入 一 个 console 对 象 。 
@ 事实 上 ，info 是 log 的 一 个 子 类 别 ， 表 示 的 是 “一 般 信息 ”。 译 者 注 
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表 21.3 消息 输出 函数 的 格式 指定 符 






































格式 指定 符 

%s 将 参数 转换 为 字符 串 型 并 输出 

%d 将 参数 转换 为 数值 型 并 输出 

%j 将 参数 转换 为 JSON 并 输出 ( 其 内 部 使 用 了 JSON.stringify ” ) 
































图 21.3 是 含有 格式 指定 符 的 console.log 的 使 用 示例 。 
21.3 ”console.log 的 使 用 示例 


> econgclesleogEoc 

ele) 

2 CONsole. Eog( Eoorr bar ys 
foo bar 


Bh i 3 0 

Console.1log('sdq foo'，Dn) ; 

Eee 

console. Log(l So fooy mr, Sbar ys 
for bar 


Var ob (21 2) 
console.1log (obj); // 如 果 传 递 的 是 对 象 引 用 ， 则 会 以 JSON 格式 输出 
> 0 } 
console.dir 函数 将 会 显示 所 指定 对 象 的 属性 一 览 ， 这 就 是 所 谓 的 检查 函数 。 从 内 部 来 看 ， 它 输出 的 是 
util.inspect 函数 的 结果 。ECMAScript 第 5 版 存在 Objectkeys 或 Object,getOwnPropertyNames 这 样 的 标准 
检查 API (参见 表 5.7 )。 因 此 ， 并 非 一 定 要 使 用 console.dir 才能 检查 对 象 的 属性 。 不 过 ，console.dir 的 输 
出 格式 非常 整齐 明了 ， 请 根据 情况 选取 使 用 这 两 种 方式 。 


国 21.3.5 util 模块 | 


util 模块 和 console 模块 一 样 ， 都 是 能 使 调试 过 程 更 为 简便 的 模块 “。 如 果 要 使 用 util 模块 ， 则 需要 像 
下 面 这 样 显 式 地 载 人 该 模块 。 可 以 以 任意 的 变量 名 来 指称 这 一 模块 ， 不 过 ， 如 无 特别 理由 ， 最 好 使 用 util 
这 一 名 称 ， 这 样 的 可 读 性 较 高 。 
// util 模块 的 使 用 方法 
var UE ele OUET 何 耻骨 克 
ES 天 // 调用 util 模块 内 的 函数 
表 21.4 列举 了 uti 模块 内 具有 代表 性 的 一 些 函数 。 


表 21.4 util 模块 内 具有 代表 性 的 函数 


















































































































































print(a,b,…) 将 所 有 参数 转换 为 字符 串 型 ， 并 以 标准 输出 规格 显示 

puts(a,b,……) 将 所 有 参数 以 标准 输出 规格 显示 

debug(msg) 将 参数 以 标准 出 错 规格 显示 

error(a,b,…) 将 所 有 参数 以 标准 出 错 规格 显示 

inspect(obj, showHidden, depth, colors) 返回 一 个 字符 串 , 该 字符 串 将 会 以 一 定 的 格式 显示 对 象 的 属性 一 览 。 其 他 
参数 的 说 明 在 此 略 去 

log(msg) 以 标准 输出 规格 显示 当前 时 刻 及 相关 参数 

inherits(ctor, superCtor) 第 1 个 参数 中 的 类 对 象 ， 将 会 原型 继承 第 2 个 参数 的 类 对 象 











util.inherits 的 使 用 方式 如 代码 清单 21.1 所 示 。 其 内 部 的 执行 方式 与 本 书 第 2 部 分 5.17.2 节 中 所 例 举 
的 代码 是 相同 的 。 通 过 utilLinherits ， 我 们 可 以 方便 地 为 自 定义 的 对 象 增加 事件 分 发 功能 。21.3.9 节 将 对 详 























中 请 参见 本 书 第 2 部 分 。 
回 ”如今 util 模块 已 经 取代 了 sys 模块 的 地 位 。 不 过 为 了 向 下 兼容 ，sys 模块 仍然 存在 。 在 实际 使 用 中 还 请 选用 util 模块 。 
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细 内 容 进 行 说 明 。 
| 代码 清单 21.2 ”utiLinherits 的 使 用 示例 
// 相当 于 基 类 的 构造 函数 


function Base() { 
Base.prototype.method = function() { console.log('base method called'); } 


// 相当 于 派生 类 的 构造 函数 


function Derived() {} 


// 继承 


require('util') .inherits (Derived, Base) 





// 代码 清单 21 .2 的 使 用 示例 


> Var obj = new Derived(); 


> obj .methoq() ; 
base method called 





围 21.3.6 process 对 象 | 


process 对 象 是 一 种 宿主 对 象 。 和 console 对 象 一 样 ， 它 仅 有 一 个 实例 ， 即 所 谓 的 单 例 对 象 
(Singleton )。 全 局 变量 process 是 默认 存在 的 ， 可 以 通过 它 引 用 process 对 象 。 可 以 通过 console. 
dir(process) 来 显示 process 对 象 的 属性 一 览 。 表 21.5 列 出 了 process 对 象 中 一 些 具 有 代表 性 的 属性 。 


表 21.5 ”process 对 象 的 属性 ( 节选 ) 
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属性 名 说 明 

argv 命令 行 参 数 。 字 符 串 值 数组 。 数 组 的 第 1 个 元 素 为 "node' ,第 2 个 元 素 为 执行 文件 的 路 径 。 从 第 3 个 参数 起 
是 命令 行 选 项 

env 以 关联 数组 形式 保存 环境 变量 的 对 象 

stdin 标准 输入 格式 的 数据 流 对 象 

stdout 标准 输出 格式 的 数据 流 对 象 

stderr 标准 出 错 格式 的 数据 流 对 象 

exit(status) 结束 进程 。 参 数 status 是 进程 的 错误 代码 

version 诸如 'v0.4.8' 这 样 的 字符 串 值 

platform 诸如 "linux' 或 'win32' 这 样 的 字符 串 值 

pid 进程 ID 的 数值 

cwdl) 义 字符 串 形 式 返 回 当前 目录 

chdir(dir) 了 当前 目录 更 改 为 指定 目录 

getuid() 返回 当前 运行 用 户 的 用 户 ID 

setuid(uid) 旨 定 的 用 户 ID 更 改 当 前 运行 用 户 

kill(pid, signal) 将 信号 发 送 给 指定 pid ( 数值 ) 的 进程 。 信 号 是 以 类 似 于 'SIGTERM ' 形式 的 字符 串 值 指定 的 。 


























关于 stdout 、stdin 及 stderr， 之 后 的 21.3.11 节 将 对 此 进行 说 明 。process 对 象 将 会 触发 表 21.6 中 的 这 
些 事件 。 


表 21.6 ”process 对 和 象 的 事件 










































































事件 名 事件 处 理 程序 说 明 
exit function()0 该 事件 将 在 进程 结束 时 被 触发 
uncaughtException function(exception){} 该 事件 将 在 抛 出 了 没有 被 捕获 的 异常 时 被 触发 。 事 件 处 理 程序 的 参 
数 是 一 个 异常 对 象 
信号 字符 串 function()f 诸如 'SIGINT ' 这样 的 字符 串 
例如 ， 可 以 像 代码 清单 21.3 这 样 来 设计 uncaughtException 事件 的 事件 处 理 程序 。 其 中 on 的 含义 将 





会 在 之 后 说 明 。 
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| 代码 清单 21.3 uncaughtException 事件 的 使 用 示例 


process.on('uncaughtException', function(err) { 
console.log('Got an error: %s', err.message); 
process.exit (1) ; 

DD 


thnreow new Eeron( coon 


可 以 在 process 对 象 的 事件 处 理 程序 中 使 用 操作 系统 级 别 的 信号 处 理 程序 。 例 如 ， 下 面 的 代码 将 会 响 
应 SIGINT 信号。 




















process.on('SIGINT', function() { 
console.log('Got SIGINT signal'); 


Do 


转 21.3.7 全 局 对 旬 | 


如 果 不 太 清楚 全 局 对 象 的 含义 ， 可 以 重新 阅读 一 下 本 书 5.21 Vs 在 Nodejs 中 ,全 局 变量 global 是 
默认 存在 的 。 该 global 变量 的 作用 与 客户 端 JavaScript 中 的 window 变量 相同 ， 始 终 指向 了 全 局 对 象 。 
可 以 像 下 面 这 样 ， 获 得 所 谓 的 全 局 变量 与 全 局 函数 一 览 

















> Object.keys (global); // 在 最 外 层 代 码 中 也 可 以 使 用 object .keys (this) ， 两 者 的 功能 相同 
ie 

"EOCeaSs 

GLOBAL ' ， 

ta i 

'Buffer', 

'setTimeout', 


'setIinterval', 
'clearTimeout', 
'clearInterval', 
'console', 
'module', 
'require', 


5 
在 此 略 去 输出 结果 。 而 通过 Object.getOwnPropertyNames(global)， 则 能 够 获得 更 全 面 的 全 局 信号 一 览 。 


加 | 21.3.8 ”Node.js 程序 设计 概要 | 


图 回调 函数 

Nodejjs 程序 设计 中 的 核心 就 是 异步 处 理 。 由 于 Node.js 的 代码 是 以 异步 处 理 的 方式 执行 的 ， 因 此 经 
常会 使 用 回调 函数 。 例 如 ， 下 面 代 码 的 能 够 在 3 秒 之 后 以 标准 输出 规格 输出 一 段 消息 。 

// 3 秒 后 输出 至 控制 台 

setTimeout (function() { console.log('time up'); }，3000); // 通过 参数 来 指定 回调 函数 

上 面 的 代码 也 可 以 在 会 话 式 的 壳 层 中 执行 。 不 过 ， 在 通过 壳 层 执行 时 ， 其 执行 方式 可 能 较 难 理解 ， 
所 以 请 先 准备 好 写 有 以 上 代码 的 time.js 文件 ， 然 后 像 下 面 这 样 通过 node 指令 执行 。 执 行 结果 如 下 所 示 。 

// 通过 命令 行 执 行 以 下 指令 


$ node time. 


]Jjs 
Ws 秒 之 后 将 会 输出 以 下 内 容 ， 同时 node 指令 全 部 完成 







































































time up 


$ 


国 事件 循环 
异步 处 理 的 价值 能 够 在 网 络 处理 中 得 到 最 大 的 发 挥 。 接 下 来 ， 我 将 介绍 一 段 简单 的 通过 Node.js 来 实 
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现 的 HTTP 服务 器 处 理 的 代码 ( 代码 清单 21.4 )。 这 上段 代码 将 会 通过 8080 端口 接收 HTTP 请 求 ， 并 将 
HTTP 响应 返回 至 发 送 者 。 在 Nodejs 中 ， 只 要 书写 了 事件 等 待 的 代码 ， 就 会 隐 式 地 在 脚本 中 加 入 事件 循 
环 ， 之 前 setTimeout 函数 的 例子 也 是 如 此 。 如 果 没 有 事件 等 竺 代码， 脚本 就 会 在 全 部 运行 完成 之 后 结束 。 

代码 清单 21.4 中 的 代码 ， 首 先 通过 listen(8080) 创建 了 一 个 等 待 连接 的 事件 源 ( 即 一 个 能 够 触发 事 
件 的 对 象 )， 然 后 在 代码 的 末尾 隐 式 地 加 入 了 一 个 事件 循环 (需要 注意 的 是 ， 该 循环 不 会 在 listen 被 调 
用 时 中 上 上 ) 如 果 在 8080 端口 收 到 了 HTTP 连接 ， 就 会 在 事件 循环 中 调用 回调 函数 。 回 调 函 数 将 会 处 理 
HTTP 响应 。 在 离开 了 回调 函数 之 后 ， 它 将 会 再 次 回 到 隐 式 的 事件 循环 中 。 


| 代码 清单 21.4 ”通过 Node.js 实现 简单 的 Web 服务 器 






















































































Var nt = requlel( nee 





http.createServer (function(request, response) { // 通过 参数 来 指定 回调 函数 
response.writeHead(200, {'Content-Type': 'text/plain'}); 
response.write('Hello ');，; 
response.end('World\n'); 

}) .listen(8080); 


代码 清单 21.4 中 有 很 多 隐 式 的 处 理 ， 本 节 之 后 将 介绍 其 对 应 的 显示 代码 (代码 清单 21.5 )。 可 以 通 
过 on 函数 在 httpd 对 象 中 设 定 回调 函数 。on 函数 是 Node.js 程序 设计 中 最 为 重要 的 函数 ， 需 要 通过 该 函 
数 来 对 事件 设 定 回调 函数 。 这 类 回调 函数 也 被 称 为 事件 处 理 程序 。 从 内 部 来 看 ，on 函数 是 addListener 也 
数 的 一 个 别名 (之 后 将 会 详细 说 明 )。 

代码 清单 21.5 中 的 on 函数， 对 httpd 对 象 的 'request' 事件 设 定 了 事件 处 理 程序 。httpd 对 象 
的 'request 事件 将 会 在 收 到 HTTP 请 求 时 被 触发 。 在 Nodejs 中 ， 我 们 通常 会 通过 事件 的 名 称 来 识别 事 
件 ， 并 将 事件 与 事件 处 理 绑 定 。 之 前 代码 清单 21.4 中 的 回调 函数 ， 从 内 部 来 看 ， 也 是 request 事件 的 事 
件 处 理 程序 ， 只 不 过 事件 名 被 隐藏 了 而 已 。 


有 代码 清单 21.5 通过 Nodejs 实现 简单 的 Web 服务 器 ( 显示 地 使 用 回调 函数 


IE 





































































































var httpd = http.createServer(); 
httpd.listen(8080); 





httpd.on('request', function(request, response) { // 通过 参数 来 指定 回调 函数 
response.writeHead(200, {'Content-Type': 'text/plain'}) ， 
response.write('Hello '); 
response.end('World\n'); 

We ee // 如 果 去 除了 注释 标记 ，Web 服务 器 就 会 在 返回 了 HTTP 响应 之 后 终止 

打字 


转 事件 处 理 的 格式 
如 同 代 码 清单 21.5， 向 事件 添加 事件 处 理 程 序 的 方式 ， 是 Node.js 程序 设计 中 的 基本 内 容 。 这 即 是 所 
谓 的 事件 驱动 程序 设计 风格 。 关 于 事件 驱动 的 详细 内 容 ， 可 以 参见 6.8 节 。 
仅 从 格式 上 来 理解 on 函数 是 很 容易 的 。 只 要 以 下 面 的 方式 理解 即 可 。 
// on 函数 的 格式 
发 生 事件 的 对 象 .on ( ' 事件 名 '， 事件 处 理 程序 ) ; 
要 理解 这 一 格式 并 不 难 ， 不过， 很 可 能 也 会 产生 以 下 疑问 。 
@ 发 生 事 件 的 对 象 是 怎样 的 对 和 象 
@ 能 够 使 用 那些 名 称 来 作为 事件 名 
@ 事件 处 理 程序 会 在 何 时 、 被 谁 、 以 什么 参数 调用 
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这 些 问 题 将 在 之 后 的 小 节 中 得 到 解答 。 


转 21.3.9 事件 API 














j， 本 


首先 ， 我 们 来 整理 一 下 术语 。 在 响应 事件 时 所 调 





在 Nodejs 中 ， 这 两 个 术语 经 常会 被 混 

















使 用 发 生 这 一 术语 ， 














有 的 事件 就 都 











事件 的 发 生 ， 也 称 为 事件 的 发 出 (emit ) 或 触发 ( fire )。 
如 果 事件 一 词 作为 宾语 ， 则 统一 使 
有 一 些 诸如 计时 咒 事 件 这 样 的 ， 发 出 者 不 明确 的 事件 。 如 果 将 这 类 事件 的 发 出 者 看 作 全 局 对 象 ， 那 么 所 
发 出 者 对 象 了 。 发 出 事件 的 对 象 被 称 为 事件 源 ( 对象 )。 





所 有 的 事件 都 可 以 通过 事件 源 ， 以 唯 




















事件 与 事件 处 理 程序 之 间 是 1 对 多 的 对 应 关系 。 如 果 对 已 经 设 定 了 和 
数 ， 原 有 的 事件 处 理 程序 并 不 会 被 蔡 换 ， 而 是 会 与 新 的 事件 处 至 
在 多 个 事件 处 理 程序 的 情况 ， 将 会 以 on 函数 的 设 定 顺 序 来 调用 事件 处 理 程序 。 不 过 ， 这 样 一 来 ， 
顺序 就 会 和 代码 的 具体 写法 相关 联 ， 而 这 是 有 违 引 
法 “。 此 外 ， 目 前 还 无 法 在 中 途中 断 多 个 事件 处 理 程序 的 调 























团 EventEmitter 类 














Node.js 中 的 事件 源 继承 于 events 模块 中 的 EventEmitter 类 ， 
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] 的 回调 函数 被 称 为 事件 处 理 程序 或 事件 侦 听 器 。 
将 统一 使 用 事件 处 理 程序 一 词 。 
在 本 书 中 ， 如 果 事件 一 词 作 为 主语 ， 则 统一 


词 ”。 大 多 数 事件 都 有 其 发 出 者 对 象 。 也 


的 字符 串 ( 事件 名 ) 来 进行 识别 。 各 个 事件 的 名 称 是 由 其 各 自 
的 事件 源 决定 的 。 如 果 要 了 解 可 以 使 用 哪些 事件 ， 则 需要 阅读 API 参考 文档 ， 或 阅读 Nodejs 的 源 代码 。 


EE 件 处 理 程序 的 事件 使 用 on 扬 


程序 相连 。 在 当前 实现 中 ， 对 于 同时 存 





























用 链 。 








有 件 驱 动 程序 设计 的 习惯 ， 因此， 应 尽 可 能 避免 这 种 做 





调用 





且 其 事件 继承 了 表 21.7 中 的 方法 。 因 


此 可 以 认为 ， 在 本 章 的 说 明 中 出 现 的 带 有 on 的 类 及 对 象 ， 都 继承 于 EventEmitter 类 。 例 如 ， 在 代码 清单 





21.5 中 ，http.createServer() 返回 了 一 个 对 象 ， 且 该 对 象 实例 所 对 应 的 类 是 | 





表 21.7 在 事件 中 所 使 用 的 方法 

















EventEmitter 类 继承 而 来 的 。 





addListener(type, listener) 





向 名 为 type 的 事件 添加 事件 处 理 程序 














onltype, listener) 


addListener 的 别名 


































































































onceltype, listener) 与 addListener 意义 相同 ， 不 过 此 时 事件 处 理 程序 仅 会 被 调用 一 次 
removeListenerltype, listener) 除 所 指定 的 事件 处 理 程序 

removeAllListeners(type) 将 名 为 type 的 事件 的 事件 处 理 程序 全 部 删除 

emit(typel, arg,…] 发 出 名 为 type 的 事件 

listeners(type) 返回 名 为 type 的 事件 中 所 有 的 事件 处 理 程序 











setMaxListeners(n) 设 定 一 个 事件 所 能 设 定 的 对 


有 件 处 理 程序 的 上 限 ( 默认 值 为 10 























在 表 21.7 中 ， 我 们 经 常会 
的 差异 ， 使 用 哪 一 个 都 没 






































问题 。 其 中 on 较为 简短 好 ] 









































] 到 的 是 事件 处 理 程序 的 添加 与 删除 方法 。addListener 与 on 只 有 名 称 上 


]， 因 此 ， 本 书 将 主要 使 用 on。 由 于 事件 的 添 


加 与 删除 方法 的 返回 值 是 事件 源 的 引用 ， 因 此 我 们 可 以 通过 方法 链 ， 以 event_source.on('foo', handler1). 











on('bar', handler2) 的 形式 调用 。 

















如 果 在 删除 方法 中 使 用 了 bind， 则 必须 对 与 引用 有 关 的 一 些 问题 加 以 注意 ( 参见 之 后 对 事件 处 理 程 














序 内 this 引 ) 








TE 





的 说 明 )。 而 emit 方法 则 会 在 之 后 
listeners 方法 返回 的 并 不 是 事件 处 理 程序 的 副本 ， 而 是 这 些 事件 处 理 程 序 ( 即 函 数 的 数组 )。 
果 对 listeners 方法 所 返回 的 数组 进行 添加 或 删除 操作 ,事件 处 理 程序 就 会 被 更 改 。 





介绍 自 定义 事件 时 说 明 。 











因此 ， 


H 于 这 通常 是 有 违 


中 原 书 中 虽然 对 该 术语 进行 了 分 类 与 统一 处 理 ， 但 由 于 翻译 及 中 文 语言 习惯 的 问题 ， 在 译文 中 并 没有 严格 遵循 原文 。 事 实 


上 这 两 种 术语 的 译 法 都 是 得 获得 广泛 认可 的 ， 无 需 过 


分 在 意 对 其 进行 区 分 。 





译 者 注 


@ 不 应 使 事件 处 理 程序 的 调用 顺序 与 代码 内 容 相 关 ， 看 似 是 一 条 很 容易 遵守 的 规则 ， 事 实 上 并 没 那么 简单 。 个 人 观点 是 ， 
在 遵守 这 一 原则 而 使 代码 变 得 难以 理解 时 ， 不 用 过 分 拘泥 于 代码 的 易 读 性 ,保留 这 样 的 复杂 代码 即 可 。 不 过 必须 认识 到 ， 
如 果 事 件 处 理 程序 之 间 存 在 依赖 关系 ， 代 码 将 会 变 得 难以 更 改 。 
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程序 设计 规范 的 ， 因 此 尽 可 能 不 要 采用 这 种 方法 。 


对 于 1 个 事件 来 说 ， 它 能 够 注册 的 事件 处 理 程序 的 数量 是 有 上 限 的 。 这 一 机 制 能 够 在 因 错 误 而 不 断 
添加 事件 处 理 程 序 时 发 挥 作用 ， 以 便 找 出 问题 所 在 。 默 认 情 况 下 ， 事 件 处 理 程序 的 数量 超过 10 时 ， 就 会 
以 console.error 发 出 警告 。 通 过 setMaxListeners 方法 则 能 提高 该 上 限 值 。 

EventEmitter 类 ( 及 其 子 类 ) 的 对 象 实 例 将 会 发 出 newListener 事件 。 当 对 象 中 添加 了 新 的 事件 处 理 
程序 ， 该 事件 就 会 发 生 。newListener 事件 的 回调 函数 的 格式 如 下 所 示 。 其 中 第 1 个 参数 是 事件 名 ， 所 添 
加 的 事件 处 理 程 序 的 Function 对 象 则 会 被 传递 至 第 2 个 参数 。 






























































function(type, listener) { } 








园 事件 处 理 程序 内 的 this 引用 





一 样 的 。 





事件 处 理 程序 内 的 this 引用 指向 的 是 事件 源 对 象 。 其 功能 与 客户 端 JavaScript 中 DOM 事件 的 情况 是 








可 以 通过 bind 来 更 改 事件 处 理 程序 内 的 this 3 




















| 用 。 关 于 bind 的 详细 内 容 ， 请 参见 本 书 第 2 部 分 表 


























6.4 的 说 明 。 而 如 何 通过 bind 更 改 事件 处 理 程序 内 的 this 引用 ，6.8 节 已 经 进行 过 说 明 。 











如 果 通 过 bind 传递 了 事件 处 理 程序 ， 则 必须 在 使 用 removeListener 删除 事件 时 多 加 小 心 。 下 面 的 代码 



































无 法 按 预期 的 方式 删除 事件 处 理 程序 。 其 原因 在 于 ， 


event source.on('foo', callback.bind()); 








二 次 调用 bind 时 所 返回 的 不 是 同一 个 Function 对 象 。 

















event source.removeListener('foo'，callback.bind());// 与 上 一 个 回调 函数 是 两 个 不 同 的 函数 


国 在 事件 处 理 程序 内 调用 异步 处 理 时 的 注意 事项 














本 方 将 列举 Nodejjs 程序 设计 中 的 一 些 多 发 问题 。 
事件 处 理 程序 中 的 代码 ， 将 会 根据 事件 的 不 同 而 执行 不 同 的 处 理 ， 这 从 概念 上 来 说 并 不 难 理解 。 毕 








竟 ， 如 果 之 前 有 GUI 中 事件 驱动 程序 设计 经 验 ， 对 这 种 风格 应 该 会 很 熟悉 ， 而 JavaScript 程序 员 大 多 也 














会 对 客户 端 JavaScript 中 的 DOM 事件 模型 相当 了 解 。 在 GUI 以 外 的 环境 中 ， 在 程序 设计 中 使 用 观察 者 
模式 或 回调 函数 也 是 非常 常见 的 。 在 事件 驱动 程序 设计 中 需要 注意 的 是 ， 不 能 在 事件 处 理 程序 中 书写 可 
能 造成 阻塞 的 处 理 (在 任何 的 事件 驱动 程序 设计 中 都 是 如 此 )， 同 时 还 要 对 事件 处 理 程序 中 的 this 引用 加 























以 注意 (在 JavaScript 中 必须 小 心 处 理 这 一 问题 )。 




















而 Nodejs 中 的 程序 设计 模型 与 传统 的 事件 驱动 模型 有 少许 差异 。 通 常 ， 在 事件 处 理 程序 的 代码 中 ， 
是 不 能 调用 异步 处 理 的 。 在 Nodejs 以 外 的 很 多 事件 驱动 程序 设计 中 ， 事 件 处 理 程序 内 所 调用 的 函数 与 方 

















法 也 大 多 是 同步 的 。 
































而 另 一 方面 ,在 Nodejs 中 ， 我 们 可 以 正常 地 在 事件 处 理 程序 中 调用 异步 函数 及 方法 。 回 调 函 数 常 


























常会 直接 以 匿名 函数 ( 作为 团 包 ) 的 形式 传递 ， 因 此 很 容易 造成 误解 。 接 下 来 ， 本 节 将 通过 具体 的 例子 ， 











列举 容易 出 现 的 误解 。 





代码 清单 21.6 是 Nodejjs 的 典型 错误 。 其 中 个 别 API 的 含义 将 会 在 之 后 的 小 节 逐 一 说 明 ， 其 功能 是 通 




















过 URL 来 指定 文件 ， 并 将 文件 内 容 作 为 响应 返回 ， 从 而 实现 了 HTTP 服务 器 处 理 。 错 误 处 理 之 类 的 内 容 已 

被 省 略 。 代 码 清单 21.6 的 关键 之 处 在 于 ， 在 事件 处 理 程序 中 调用 了 不 同 的 异步 处 理 。 外 部 事件 处 理 程序 被 

注释 为 了 “事件 处 理 程序 内 1”"， 内 部 事件 处 理 程序 则 被 注释 为 了 “事件 处 理 程序 内 2”， 请 对 此 加 以 确认 。 
在 代码 清单 21.6 中 我 们 需要 注意 的 是 ， 事 件 处 理 程序 2 中 读 取 的 文件 的 内 容 ， 被 赋值 给 了 事件 处 理 











程序 1 中 的 本 地 变量 content。readFile 函数 的 第 3 个 参数 是 一 个 回调 函数 ， 它 被 作为 事件 处 理 程序 调用 。 





回调 函数 是 一 种 闭 包 ， 因 此 ( 从 闭 包 的 角度 来 看 )， 


























它 可 以 访问 外 部 的 局 部 变量 content。 如 果 对 这 部 分 





的 执行 方式 不 太 清楚 ， 可 以 参见 本 书 第 2 部 分 的 相关 章节 。 由 于 文件 读 取 能 够 被 立即 完成 ， 因 此 似乎 文 
件 的 内 容 是 能 够 被 传递 给 事件 处 理 程序 的 参数 str 的 。 不 过 ， 代 码 清单 21.6 的 HTTP 服务 器 实际 上 总 会 








回 "not excepted' 的 响应 。 


向 
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上 代码 清单 21.6 这 段 代码 无 法 得 到 预期 的 执行 结果 


var http = require('http') .createServer (function(request, response) { 


// 事件 处 理 程序 内 1 





Var content = 'not expected'; 

var filepath = './' + require('url') .parse (request.url) .pathname; 
// 这 条 语句 有 效 的 前 提 是 所 指定 的 文件 存在 于 当前 目录 中 

require('fs') .readFile (filepath, 'utf8', function(err, str) { 


// 事件 处 理 程序 内 2 
if (err) throw err; 
content = St 


YR 


response.writeHead(200, {'Content-Type': 'text/plain'}); 
response.end (content); 
}) .listen(8080); 


代码 清单 21.6 中 的 代码 之 所 以 无 法 获得 预期 结果 ， 是 因为 它 事实 上 将 会 以 图 21.4 所 示 的 方式 执行 。 
只 要 还 没有 离开 事件 处 理 程序 QD， 就 无 法 调用 事件 处 理 程序 @。 因 此 ， 事 件 处 理 程序 @@ 中 的 content = str 
一 行 始终 会 在 response.end(content) 被 调用 之 后 才 被 执行 。 如 果 对 执行 顺序 没有 概念 ， 可 以 在 代码 清单 
21.6 中 插入 console.log 语句 ， 以 确认 执行 顺序 。 
‖ 图 21.4 代码 清单 21.6 的 执行 方式 的 图 示 
事件 处 理 程序 中 
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: 时 间 
转 事件 驱动 程序 设计 中 的 铁 则 

为 了 不 发 生 上 一 节 中 所 说 的 错误 ， 我们 必须 清楚 地 认识 到 ， 所 有 的 事件 处 理 程序 都 只 能 在 ( 隐 式 的 ) 
事件 循环 中 被 调用 。 并 且 ， 只 要 尚未 离开 事件 处 理 程序 ， 就 无 法 回 到 事件 循环 中 。 在 开发 过 程 中 切 勿 忘 
记 这 一 原则 。 由 这 一 原则 还 引出 了 另 一 个 重要 的 注意 事项 ， 即 在 事件 处 理 程序 中 ， 绝 对 不 能 发 生 阻塞 。 
之 前 说 过 ， 这 一 点 是 事件 驱动 程序 设计 中 的 一 条 铁 则 。 在 事件 处 理 程序 中 停止 的 话 ， 是 无 法 再 回 到 事件 
循环 中 的 ， 于 是 这 个 程序 就 将 会 中 止 执行 。 
将 代码 中 的 readFile 替换 为 同步 的 API， 确 实 也 可 以 使 代码 清单 21.6 能 以 预期 的 方式 执行 。 不 过 ， 
这 种 解决 方法 并 不 符合 Nodejs 习惯 。 正 确 的 做 法 是 ， 像 代码 清单 21.7 那样 ， 改 写 内 部 的 事件 处 理 程序 
@， 在 其 中 写 上 HTTP 响应 处 理 的 代码 。 


上 代码 清单 21.7 改写 代码 清单 21.6 以 使 其 能 正常 运行 


var httpd = require('http') .createServer (function(request, response) { 
var filepath = './' + require('url') .parse (request.url) .pathname; 
require('fs') .readFile (filepath, 'utf8', function(err, str) { 
if (err) throw err; 


























=| 
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response.writeHead(200, {'Content-Type': 'text/plain'}); 
response.end (str)，; 
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)0 ee ; 

在 代码 清单 21.7 中 ， 回 调 函 数 并 没有 被 包含 在 很 深 的 代码 层 中 ， 因 此 ， 改 写 后 也 看 不 出 太 大 差异 。 
然而 ， 如 果 在 之 后 的 代码 清单 22.12 那样 的 代码 中 进行 了 类 似 的 改写 ， 代 码 的 执行 方式 就 会 变 得 难以 理 
解 。 回 调 函 数 能 够 通过 闭 包机 制 来 实现 对 外 部 局 部 变量 的 访问 ， 这 是 一 种 方便 的 功能 。 但 如 果 代 码 层次 
很 多 ， 则 应 考虑 像 代码 清单 21.8 这 样 ， 重 新 定义 一 个 新 的 函数 。 


上 代码 清单 21.8 改写 代码 清单 21.7， 使 其 不 再 使 用 闭 包 


function callback (response, err, str) 1 
if (err) throw err; 
response.writeHead(200, {'Content-Type': 'text/plain')}); 
response.end (str); 









































} 


var httpd = require('http') .createServer (function (request, response) { 
var filepath = './' + require('url') .parse (request.url) .pathname; 
require('fs').readFile(filepath, 'utf8', callback.bind(this, response)); 
}) .listen(8080); 
国 自 定义 事件 
如 果 将 自 定义 对 象 作为 事件 源 ， 就 能 对 该 对 象 设 置 事件 处 理 程序 。 这 里 需要 考虑 的 是 如 何 才能 写 出 
符合 Node.js 风格 的 代码 ， 除 了 传统 的 基于 方法 的 API 之 外 ， 能 和 否 使 用 基于 事件 的 API 呢 ? 
通常 会 使 用 utilinspect 函数 来 将 自 定义 对 象 设 定 为 事件 源 。 事 件 名 可 以 根据 喜好 任意 选择 。 不 
过 ，'error 这 一 名 称 有 特定 的 用 途 ， 所 以 不 应 作为 事件 名 使 用 。 代 码 清单 21.9 介绍 了 将 自 定义 类 设 定 为 
有 件 源 的 方法 。 


代码 清单 21.9 将 自 定义 类 设 定 为 事件 源 


var events = require('events'); 
Wa a ec ET 人 蚂 央 到 





























































































































上 由 





function MyEventSource() { 


events.EventEmitter.call (this); // 调用 父 类 的 构造 函数 
util.inherits (MyEventSource, events.EventEmitter); // 继承 


MyEventSource.prototype.doit = function(data) { 
// 如 有 必要 ， 可 在 此 添加 MyEventSource 对 象 的 处 理 







































































this.emit ('myevent', data); // 发 出 自 定义 事件 。 事件 名 可 以 使 用 任意 名 称 
| 
// 可 以 通过 下 面 的 代码 来 使 用 上 面 的 事件 源 
Var obj = new MyEventSource(); 
obj.on("myevent"，function(data) { // 向 自 定义 事件 添加 事件 处 理 程序 
console.log('Received data: "' + data + '"'); 
bs 


Sb dolne ooDar 
如 果 该 对 象 是 一 个 单 例 对 象 ， 则 可 以 像 代码 清单 21.10 这 样 ， 直 接 通过 EventEmitter 类 来 创建 对 象 实例 。 
有 代码 清单 21.10 将 单 例 对 象 设 定 为 事件 源 











Var EventEmitter = require('events') .EventEmitter; 
var mysource = new EventEmitter(); 
mysource.val = 'foobar'; 


mysource.doit = function(data) { 
this.emit ('myevent', data); 
D8 


图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 





第 21 章 服务 器 端 JavaScript 与 NodeJjs 369 @ 
mysource.on('myevent', function(data) { 
人 console.log('Received data: "' + data + '"'); 
myseurcesdonel toobDar 
国 21.3.10 缓冲 | 





在 JavaScript 以 外 的 程序 设计 语言 中 ， 存 在 所 谓 数组 的 数据 结构 。 通 常 ， 数 组 是 一 段 连续 的 内 存 空 
间 ， 其 中 存放 了 特定 元 素 类 型 的 值 。 

本 书 第 2 部 分 提 到 过 ，JavaScript 中 的 数组 和 其 他 语言 中 的 数组 的 性 质 稍 有 不 同 。JavaScript 中 的 数 
组 是 一 种 对 象 ， 只 不 过 其 属性 名 恰好 是 连续 的 数值 而 已 。 不 考虑 其 内 部 实现 如 何 ， 至 少 它 并 不 能 保证 使 
用 了 连续 的 内 存 空间 ， 因 此 ， 可 能 存在 效率 低下 的 问题 。 

在 JavaScript 中 也 没有 字 节 类 型 ， 而 在 其 他 很 多 程序 设计 语言 中 ， 都 具有 这 种 类 型 。 于 是 ， 在 
JavaScript 中 也 就 不 存在 字 节 序章 及 相对 的 类 了 。 不 过 ，Nodejs 中 的 Buffer 类 可 以 被 用 于 弥补 这 一 缺失 。 
图 Buffer 对 象 的 创建 

可 以 像 下 面 这 样 ， 将 所 需 的 大 小 传递 给 其 构造 函数 ， 来 创建 一 个 Buffer 类 的 对 象 实例 。 所 创建 的 对 
象 实例 ， 被 称 为 Buffer 对 象 。 

var buf = new Buffer(1024); // 创建 一 个 大 小 为 1024 字 节 的 Buffer 对 象 

在 创建 之 后 便 无 法 再 更 改 Buffer 对 象 的 大 小 。 尽 管 可 以 对 元 素 进行 改写 ,但 不 能 超出 创建 时 所 定 的 
大 小 限制 ， 添 加 更 多 的 元 素 。 

我 们 还 可 以 通过 其 他 的 一 些 方式 来 创建 Buffer 对象 。 比 如 ， 可 以 从 其 他 Buffer 对 象 中 复制 一 部 分 内 























































































































容 ， 并 以 此 创建 新 的 对 象 。 这 种 做 法 相当 于 使 用 所 谓 的 复制 构造 函数 来 创建 对 象 。 还 可 以 通过 JavaScript 
基本 类 型 之 一 的 字符 串 值 ， 或 数值 数组 来 创建 对 象 。 下 面 分 别 是 一 些 具体 示例 。 

var buf = new Buffer(buf) ; // 相当 于 通过 复制 构造 函数 来 创建 Buffer 对 象 

var buf = new Buffer('foo'); // 通过 字符 串 值 来 创建 Buffer 对 象 

var buf = new Buffer([0x61，0x62，0x63]) ; ”// 通过 数值 数组 来 创建 Buffer 对 象 ( 在 本 例 中， 其 值 为 'abc' ) 














国 Buffer 对 象 与 字符 串 
在 JavaScript 中 ， 字 符 串 的 内 部 编码 是 UTF-16 (UCS2 )。 通 常情 况 下 ，UFT-16 编码 的 字 节 序列 并 没 
有 什么 利用 价值 。 因 此 ， 在 创建 字 节 序列 时 ， 一 般 都 会 将 UTF-16 编码 转换 为 UFT-8 编码 。 在 使 用 字符 
串 值 创建 Buffer 对 象 时 ， 可 以 通过 构造 函数 的 参数 来 指定 字符 编码 。 如 果 没 有 指定 特定 的 值 ， 则 会 将 其 
转换 为 UTF-8 编码 并 创建 字 节 序列 。 
我 们 可 以 通过 toString 方法 将 Buffer 对 象 转换 为 字符 串 值 ， 其 参数 则 可 用 于 指定 字符 编码 。 能 够 被 
必定 的 字符 编码 如 下 所 示 。 
@ ascii 
@ uft8 ( 也 可 以 写作 uft-8 ) 
® base64 
@ ucs2 ( 也 可 以 写作 ucs-2 ) 
由 于 在 之 后 的 范例 中 都 会 使 用 utf8 编码 ， 因 此 ， 这 里 仅 提 供 一 些 使 用 其 他 编码 的 示例 。 
Ss Var buf = new Buffer('abc', ‘ascii'); 


ro oo exe lle oh eel bate I 
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> Var buf = new Buffer('SLiASLqM5LiJ==', 'base64'); 
> console Log(buf .toString(})s 


> console.log(buf.tostring('base64')); 
5LiAS5LqM5LiJ== 


> Var buf = new Buffer( [0x00, Ox4E, Ox8C, Ox4E, 0x09, Ox4E]); 
= bur eostring( es 


> Var buf = new Buffezr(' 一 二 三 !，'IUcs21) ; 
= console. Logl(But), 
<Buffer 00 4E 8C 4E 09 4E> 


图 访问 Buffer 对 象 中 的 元 素 

我 们 可 以 通过 数值 下 标记 方 括号 运算 符 来 访问 Buffer 对 象 中 的 元 素 。 下 标 由 0 开始 计数 ( 对 于 大 小 
为 1024 的 Buffer 对 象 ， 有 效 的 下 标 范围 为 0~1023 )。 通 过 这 种 方法 所 获取 的 元 素 的 值 都 是 数值 类 型 。 由 
于 是 字 节 序列 ， 因 此 这 些 数 值 的 范围 为 0~255。 同 样 地 ， 可 以 通过 方 括号 运算 符 改写 每 一 个 元 素 的 值 。 
还 可 以 通过 Buffer 对 象 的 get 与 set 方法 来 改写 其 元 素 。 下 面 是 一 个 具体 的 例子 。 

> Var buf = new Buffer('abc'); 

2 [0]); // 字符 a 的 字 节 值 为 97 ( =0x61 ) 


> console.log (buf .get (0)); 
二 







































































3 ol) = OE // 将 下 标 为 0 的 元 素 的 字 节 值 改 写 为 0x41 ( 'A' ) 
Su ee 0 // 将 下 标 为 1 的 元 素 的 字 节 值 改写 为 0x42 ( 'B' ) 


> console.log(buf.tostring()); ey 
ABCc 


以 超出 范围 的 下 标 读 取 元 素 值 ， 并 不 会 造成 错误 ， 而 只 是 会 返回 一 个 undefined 值 。 以 超出 范围 的 下 标 
改写 元 素 值 ， 同 样 不 会 引起 错误 。 这 一 操作 将 被 忽略 。 如 果 没有 显 式 地 指定 下 标 ， 则 会 获得 一 个 随机 值 。 

可 以 通过 length 属性 获得 Buffer 对 象 的 大 小 。 该 大 小 是 以 字 节 为 单位 的 。 例 如 ， 对 于 下 面 这 样 的 日 
文字 符 串 ”， 其 UTF-8 编码 的 字 节 大 小 为 9。 


var buf = new Buffer(' 办 LD) '); 
console.log(buf.1ength) ; // 字 节 的 个 数 





















































var str 三 /出 UL 5 '; 
console.logl(str.length); // 字符 的 个 数 











length 所 返回 的 是 其 占用 的 内 存 大 小 ， 而 不 是 实际 写 和 人 了 数据 的 字 节 数 。 例 如 ， 下 面 的 例子 中 ， 将 
会 返回 32 这 一 结果 。 


> Var buf = new Buffer(32); 
> buf.write('abc') 


> _ Console.1log (buf.length); 
名 有 





转 Buffer 对 象 的 方法 
表 21.8 列 出 了 Bufferprototype 对 象 的 属性 。 关 于 prototype 的 语言 规范 ， 请 参见 本 书 第 2 部 分 。 
实 上 ， 这 些 属性 就 相当 于 Buffer 对 象 所 能 调用 的 方法 。 





oy 











山中 














中 这 样 的 规则 和 C 语言 很 相似 ， 不 过 今后 有 可 能 会 被 更 改 。 


@， 对 于 中 文字 符 来 说 同样 如 此 。 例 如 ，' 一 二 三 ' 的 UFT-8 编码 长 度 为 9 个 字 节 ， 而 字符 个 数 为 3， 所 以 会 得 到 与 示例 代码 
中 相同 的 结果 。 译 者 注 
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表 21.8 Buffer.prototype 对 象 的 属性 
属性 名 说 明 
[n] 访问 下 标 为 n 的 元 素 值 
gettn) 返回 下 标 为 n 的 元 素 的 字 节 值 
set(n, v) 将 下 标 为 n 的 元 素 的 字 节 值 设 为 v 
writelstring, offset=0, encoding='utf81) 将 Buffer 对 象 的 内 容 写 入 为 字符 串 String 
toString(encoding='utf8', start=0, end.buffer.lenght) ”| 将 字 节 序 列 转换 为 字符 串 并 返回 。start 与 end 分 别 是 起 始 与 结束 的 下 标 值 
slice(start, end) 返回 一 个 Buffer 对 象 ， 其 内 容 是 以 start 与 end 为 下 标 值 范围 的 字 节 序列 
copy(targetBuffer, targetStart=0, sourceStart=0, | 返回 一 个 Buffer 对 象 ， 其 内 容 是 所 指定 字 节 序列 的 一 个 副本 
sourceEnd=buffer.length) 
inspect() 返回 一 个 字符 串 值 ， 其 内 容 为 ,<Buffer 16 进 制 数 的 数列 > 

表 21.9 总 结 了 Buffer 类 的 属性 。 可 以 以 Buffer.isBuffer(arg) 的 方式 对 其 进行 使 用 。 

表 21.9 Buffer 类 的 属性 
属性 名 说 明 
isBuffer(ob)) 判定 参数 所 接收 的 对 象 是 否 是 一 个 Buffer 对 象 。 如 果 是 Buffer 对 象 ， 则 返回 真 
字 节 Length(string, encoding='utf8') 返回 一 个 以 字 节 为 单位 的 大 小 , 该 大 小 的 值 是 将 参数 所 接收 的 字符 串 值 转换 为 字 节 序列 

后 所 得 到 的 

















国 Buffer 对 象 相 关 的 注意 事项 

由 于 Buffer 对 象 不 会 进行 多 余 的 内 存 复制 操作 ， 因 此 执行 效率 很 高 ， 但 同时 在 使 用 时 也 存在 很 多 风险 ， 
必须 加 以 注意 。 与 如 今 的 脚本 语言 相 比 ，Node.js 中 Buffer 对 象 的 执行 方式 更 接近 于 C 语言 。 

例如 ， 表 21.8 中 slice 方法 所 返回 的 Buffer 对 象 ， 将 会 与 原 有 的 对 象 共享 内 存 空间 。 因 此 ， 如 果 更 改 
了 原 有 的 字 节 序列 ， 则 slice 所 返回 的 字 节 序列 的 内 容 也 会 被 改变 。 下 面 是 一 个 具体 的 例子 。 
































> Var buf = new Buffer('abcdef'); 

Svar puro DufMelieel( os 基于 buf ， 取 下 标 范围 为 1~3， 创建 一 个 新 的 字符 捉 
> Console.log (buf2.tostring()); 得 到 'bc' 

Be 


> buf2[0] = 0x41; 将 buf2 中 的 第 一 个 字 节 改写 为 'A' 
> console.log (buf2.toSstring()); 得 到 'RAc' 
Ac 


> console.log(buf.tostring()); buf 所 引用 的 字 节 序列 也 会 受到 影响 
ETeere[=a 


与 5.12 节 中 所 介绍 的 不 可 变 对 象 相 反 ， 这 是 一 种 危险 的 代码 。 在 使 用 时 请 多 加 小 心 。 像 下 面 这 样 ， 
在 代码 中 通过 copy 方法 来 赋值 的 话 ， 虽然 速度 会 有 所 牺牲 ,但 安全 性 能 得 到 保证 。 从 内 部 来 看 ， 这 一 方 
法 进行 了 字 节 序列 的 复制 操作 ， 因 此 ， 更 改 原 字 节 序列 ， 将 不 会 影响 到 通过 copy 得 到 的 字 节 序列 。 


var buf = new Buffer('abcdef'); 
Var buf2 = new Buffer(2); 

































































Donscomy (Ep 基于 buf， 取 下 标 范围 为 1~3， 创 建 一 个 新 的 字符 串 
console.1log(buf2.toStzing()) ; 得 到 'bc' 


> buf2[0] = 0x41; 将 buf2 中 的 第 一 个 字 节 改写 为 'A' 
> console.log (buf2.toSstring()); 得 到 ' Ac' 
el 


> consolen lo (bu EoSEr mag( buf 所 引用 的 字 节 序列 不 
Eeere[=a 





对 于 了 解 C 语 言 的 人 来 说 ， 可 以 将 这 里 的 copy 方法 理解 为 使 用 了 memcpy(2)， 而 slice 则 仅仅 是 创 
建 了 一 个 指向 同一 块 内 存 空间 的 指针 。 
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辆 21.3.11 流 
图 流 的 定义 

流 是 一 种 “可 以 对 数据 进行 读 写 操作 的 功能 的 抽象 ”。 通 常 来 说 ， 流 指 的 是 文件 或 网 络 ， 不过， 只 要 
具有 可 以 进行 数据 读 写 这 一 共性 ， 就 可 以 将 其 视 为 一 种 流 。 通 过 将 功能 限定 于 ( 即 抽象 为 ) 数据 的 读 写 ， 
就 能 够 对 不 同 的 目标 使 用 相同 的 操作 方式 。 在 程序 设计 中 经 常会 使 用 到 流 ， 通 过 流 的 使 用 ， 能 够 切实 感 
受到 抽象 化 的 威力 。 

不 光 Node.js， 很 多 的 程序 设计 语言 或 环境 都 提供 了 对 流 这 一 抽象 功能 的 支持 。 不 过 ， 在 Node.js 中 ， 
流 具 有 异步 读 写 这 一 特征 。Node.js 中 的 流 提 供 了 异步 读 写 功能 这 样 的 说 法 并 不 准确 。 事 实 上 ， 从 原则 上 
来 说 ，Nodejs 中 的 流 仅 支 持 异步 读 写 操作 。 仅 对 异步 处 理 提供 支持 的 设计 理念 是 Nodejjs 的 一 大 特征 
从 这 个 角度 来 说 ， 流 是 Node.js 中 具有 代表 性 的 一 种 功能 。 

在 Nodejs 中 ， 流 的 功能 是 通过 Stream 类 来 实现 的 。 从 内 部 来 看 ， 该 类 继承 于 21.3.9 节 中 所 介绍 的 
EventEmitter 类 。 不 过 ， 开 发 者 并 不 需要 显 式 地 使 用 Stream 类 。 例 如 ， 在 之 后 将 会 说 明 的 网 络 及 文件 的 读 写 
中 ， 该 类 将 会 被 隐藏 于 后 台 。 用 Java 的 概念 来 说 明 的 话 ，Stream 类 相当 于 一 种 接口 ， 或 抽象 类 。 
转 流 与 异步 处 理 
由 于 在 流 中 仅 提 供 了 异步 处 理 ， 因 此 Node.js 中 的 Stream 类 ， 与 其 他 程序 设计 语言 及 环境 中 所 提供 
的 流 类 给 人 的 感觉 有 所 不 同 。 在 其 他 的 流 类 中 ， 通 常会 提供 read 与 write， 或 着 类 似 于 get 或 put 这 样 名 
称 的 方法 。 通 过 调用 这 些 方法 ， 就 能 读 写 字 节 序列 或 字符 串 。 

在 使 用 Node.js 的 流 时 ， 不 仅 需要 调用 相应 的 方法 ， 还 要 通过 回调 函数 来 进行 事件 处 理 。 也 就 是 说 ， 
这 一 过 程 中 不 仅 需要 调用 方法 ， 还 需要 使 用 事件 及 事件 处 理 程序 等 功能 。 
转 读 取 流 

21.10 列 出 了 读 取 流 时 所 常会 用 到 的 事件 。 

表 21.10 读 取 流 中 主要 的 事件 














































































































































































































事件 名 事件 处 理 程 序 说 明 
data function(data) { 在 读 取 数 据 时 发 生 
end function() 0 在 读 取 数 据 结束 时 发 生 
close function() 0 在 流 中 的 文件 或 套 接 字 关 闭 时 发 生 
error function(exception) 人 在 出 现 错误 时 发 生 
读 取 流 中 最 重要 的 事件 就 是 data 事件 。 其 事件 处 理 程 序 的 参数 将 会 接收 所 读 取 的 数据 。 该 参数 默认 














是 Buffer 对 象 的 字 节 序 列 。 如 果 事 先 通 过 setEncoding 方法 指定 了 读 取 流 的 字符 编码 ， 事 件 处 理 程序 的 参 
数 则 会 接收 一 个 字符 串 。 
表 21.11 列 出 了 读 取 流 中 主要 的 属性 。 
表 21.11 读 取 流 中 主要 的 属性 































































































属性 名 说 明 

readable 于 标识 是 否 可 以 读 取 的 旗 标 。 如 果 发 生 了 错误 ， 则 会 被 置 为 false 
setEncoding(encoding) 旨 定 字符 编码 。 参 见 之 前 的 Buffer 对 象 与 字符 串 一 节 

pausel) 将 data 事件 的 发 出 暂停 

resume!() 重新 开始 发 出 之 前 通过 pause 暂 定 的 data 事件 

destroy() 关闭 ( 销毁 ) 流 内 部 的 文件 或 套 接 字 

destroySoon!() 关闭 ( 销毁 ) 流 内 部 的 文件 或 套 接 字 。 不 过 ， 这 一 操作 将 在 缓冲 区 清空 后 才 开 始 执行 














图 写 入 流 
在 代码 中 使 用 写 入 流 时 ， 最 基本 的 操作 就 是 调用 write 方法 。 表 21.12 中 列 出 了 写 入 流 中 主要 的 事 
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件 ， 表 21.13 列 出 了 其 主要 属性 。 
表 21.12 写 入 流 中 主要 的 事件 
事件 名 事件 处 理 程序 说 明 
drain function() {} 在 写 入 缓冲 区 已 满 而 导致 write 方法 失败 后 ， 缓 冲 区 将 会 被 清空 。 该 事件 将 在 缓冲 区 被 清空 时 发 生 
close function() 0 在 流 内 部 的 文件 或 套 接 字 被 关闭 时 发 生 
error function(exception) {人} | 在 出 现 错误 时 发 生 
表 21.13 写 入 流 中 主要 属性 
属性 名 说 明 
writable 标识 是 否 可 以 进行 写 入 的 旗 标 。 如 果 发 生 了 错误 ， 则 将 会 被 置 为 false 
write(string, encoding="'utf8') 将 字符 串 值 写 入 流 中 
write(buffer) 将 Buffer 对 象 的 字 节 序列 写 入 流 中 
end() 结束 写 入 
end(string, encoding="'utf8') 将 字符 串 值 写 入 流 中 ， 并 在 完成 结束 写 入 
end(buffer) 将 Buffer 对 象 的 字 节 序列 写 入 流 中 ， 并 在 完成 后 结束 写 入 
destroy() 关闭 ( 销毁 ) 流 内 部 的 文件 或 套 接 字 
destroySoon!() 关闭 ( 销毁 ) 流 内 部 的 文件 或 套 接 字 。 不 过 ， 这 一 操作 将 在 缓冲 区 清空 后 才 开 始 执行 
国 标准 输入 输出 


机 
由 








在 表 21.5 所 列 出 的 process 模块 属性 中 ， 含 有 一 些 标准 输入 输出 规格 的 流 对 象 。 对 于 这 些 流 对 象 ， 
可 以 使 用 本 节 所 说 明 的 方法 及 事件 对 其 进行 操作 ( 代码 清单 21.11 )。 


| 代码 清单 21.11 以 下 代码 的 功能 相当 于 cat ( 将 来 自 标准 输入 流 的 输入 流向 至 标准 输出 流 中 ) 
// 默认 情况 下 ， 标 准 输入 流 处 于 pause 状态 。 为 了 使 其 能 够 接收 data 事件 ， 必 须 对 其 调用 resume 方法 


process.stdin.resume () 


// 没有 下 面 两 行 代码 也 能 正常 运行 

// 下 面 的 data 事件 处 理 程序 所 传递 的 参数 data 是 一 个 字符 串 值 
process.stdin.setEncoding('utf8'); 
process.stdout.setEncoding('utf8'); 





















































process.stdin.on('data', function(data) { 
process.stdout .write (data); 
} 
Wom enau ee ume 
process.stdin.destroy(); 
} 
omil(veloseu Eneron 
process .exit (); 
} 
on('errorr runotion(ex) 
process.stdin.destroy(); 
Wo 


process.stdout.on('close', function() { 
process.exit (); 
}) 
.on('error', function(ex) { 
process.stdout .destroy () ; 
bs 


如 果 使 用 util 模块 中 的 pump 本 数 ， 则 可 以 将 代码 清单 21.11 中 的 代码 简化 为 以 下 两 行 。 
// 上 述 代码 的 简化 版 本 ， 其 功能 相当 于 cat 


Pizocess.stdin.resume () ; 
require('util') .pump (process.stdin, process.stdout); 
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Node.js 程序 设计 实践 


承接 前 一 章 的 内 容 ， 本 章 介绍 Node.js 程序 设计 实践 。 首 先 介绍 以 异步 方式 实现 网 络 及 文件 处 
理 的 实例 。 之 后 ， 将 会 介绍 Express 及 MongoDB。 前 者 是 一 种 运行 于 Node.js 之 中 的 Web 应 
用 框架 ， 后 者 是 一 种 面向 文档 的 数据 库 ， 可 以 通过 它 来 进行 Web 应 用 开发 。 


22.1 HTTP 服务 器 处 理 


代码 清单 21.4 已 经 说 明了 通过 Node.js 来 实现 简单 的 HTTP 服务 器 处 理 的 方法 。 在 此 我 们 重新 对 一 
些 相关 术语 进行 了 整理 。 
由 于 与 HTTP 相关 的 API 被 包含 于 http 模块 之 中 ， 因 此 在 使 用 时 需要 像 代码 清单 21.4 那样 ， 载 人 http 
模块 。 可 以 以 任意 名 称 的 变量 来 接收 require 函数 所 返回 的 对 象 ， 不 过 如 果 没 有 特别 需求 ， 应 该 使 用 http 这 
一 名 称 。 这 样 能 获得 较 好 的 可 读 性 。 本 节 中 所 有 的 代码 ， 都 将 以 下 面 这 行 语句 开始 。 

var http = require('http'); 


在 下 文中 ， 我 们 将 会 对 http 模块 中 的 类 添加 http 这 一 前 级 。 例 如 ，Server 类 将 被 称 为 http.Server。 

http 模块 中 仅 提供 了 基本 的 HTTP 功能 。 如 果 要 开发 出 真正 的 Web 应 用 ， 还 需要 设计 一 些 高 层 功能 。 
本 章 之 后 将 说 明 Express 等 Web 应 用 程序 框架 ， 可 以 考虑 在 开发 中 使 用 这 些 框架 。 在 使 用 Java 进行 Web 
应 用 开发 时 ， 我 们 通常 会 使 用 框架 ， 而 不 是 直接 使 用 Servlet API。 与 之 类 似 地 ， 通 常情 况 下 在 Node.js 中 
也 应 使 用 框架 来 开发 Web 应 用 。 


国 22.1.1 HTTP 服务 器 处 理 的 基本 流程 | 


http.Server 类 是 HTTP 服务 器 处 理 中 最 为 核心 的 一 个 类 。http.Server 对 象 能 够 发 出 表 22.1 中 列 出 的 
些 事件 。 


表 22.1 http.Server 的 事件 













































































































































































































































































事件 名 事件 处 理 程序 说 明 
request function(request, response) {} 在 收 到 来 自 HTTP 客户 端的 请 求 时 发 生 
connection function(stream) { 在 收 到 来 发 HTTP 客户 端的 请 求 时 发 生 ( 该 事件 将 在 
request 事件 ， 以 及 对 请 求 进行 分 析 处 理 之 前 发 生 ) 
close function(errno) 人 在 HTTP 服务 器 终止 时 发 生 
checkContinue function(request, response) {} 在 遇 到 Expect:100-continue 这 一 请 求 头 部 时 发 生 
upgrade function(request, socket, head) {} 在 遇 到 Upgrade 这 一 请 求 头 部 时 发 生 
clientError function(exception) 人 在 出 现 网 络 错误 时 发 生 
虽然 也 可 以 直接 通过 new 来 创建 http.Server 实例 ， 不 过 习惯 上 ， 我 们 会 使 用 http.createServer 来 创 
建 实 例 。 对 于 http.Server 类 来 说 ，http.createServer 函数 相当 于 一 个 所 谓 的 工厂 函数 。http.createServer 也 
数 的 参数 能 够 接收 一 个 可 选 的 事件 处 理 程序 。 它 将 会 被 设 定 为 ,通过 该 函数 创建 的 http.Server 对 象 的 














request 事件 的 事件 处 理 程 序 ( 在 对 代码 清单 21.4 与 代码 清单 21.5 的 比较 中 也 对 此 进行 了 说 明 )。 
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http.Server 对 象 具 有 表 22.2 中 列 出 的 这 些 方法 。 简 单 地 说 ， 在 调用 了 listen 方法 之 后 ，HTTP 服务 器 








就 会 开始 工作 ， 而 在 调用 了 close 方法 之 后 ， 运 行 就 会 被 终止 。 
表 22.2 http.Server 中 主要 的 方法 















































方法 说 明 

listen(port, [hostname], [callback]) 通过 指定 的 端口 接收 HTTP 连接 。 通常 可 以 省 略 hostname 这 一 参数 。callback 
将 在 连接 开始 时 被 调 

close() 中 断 HTTP 连接 




















通过 http.Server 来 实现 HTTP 服务 器 处 理 的 基本 流程 如 下 所 示 。 

@ 创建 http.Server 对 象 。 

@ 向 http.Server 对 象 添 加 必要 的 事件 处 理 程 序 ( 至 少 要 对 request 事件 添加 事件 处 理 程序 , 否则 HTTP 服务 
器 无 法 执行 任何 功能 )。 

@ 对 http.Server 对 象 调用 listen 方法 。 

@ 借助 request 事件 的 回调 函数 ， 从 其 参数 所 接收 的 request 对 象 中 抽出 请 求 信息 ， 并 通过 其 参数 所 接收 的 
response 对 和 象 对 响应 进行 处 理 。 


在 执行 了 listen 之 后 ， 我 们 只 需 接着 执行 等 待 事件 的 代码 即 可 。 在 显 式 地 调用 close 方法 之 前 ， 程 序 


都 将 会 等 待 HTTP 连接。 日 











对 其 进行 并 行 处 理 。 不 过 ， 
义 上 的 并 行 处 理 。 


在 从 HTTP 客 























日 于 这 里 执行 的 是 异步 处 理 ， 即 使 同时 有 多 个 HTTP 服务 器 请 求 连 接 ， 也 可 以 








由 于 这 里 使 用 的 是 单线 程 处 理 ， 因 此 即使 存在 多 个 CPU， 也 无 法 实现 真正 意 














户 端 处 收 到 了 请 求 之 后 ，request 事件 就 会 发 生 。 在 此 之 前 ， 将 会 首先 触发 connection 


事件 。 如 果 读 者 希望 直接 对 HITP 通信 协议 进行 操作 ， 则 可 以 在 connection 事件 中 进行 处 理 。 不 过 ， 如 

















果 没 有 特别 需求 ， 只 要 在 request 事件 中 执行 处 理 即 可 。 事 实 上，HTTP 服务 器 处 理 的 核心 ， 就 是 在 


request 事件 中 对 请 求 及 响应 进行 处 理 。 本 章 之 后 将 介绍 这 两 种 处 理 。 


国 22.1.2 请 求 处 理 | 


\ 




















我 们 可 以 通过 http.ServerRequest 类 来 对 请 求 进行 处 理 。 可 以 将 http.ServerRequest 对 象 传递 给 表 22.1 








中 request 寻 


有 件 的 事件 处 开 





程序 的 第 1 个 参数 。http.ServerRequest 是 一 个 继承 于 读 取 流 的 类 。 





表 22.3 与 表 22.4 分 别 总 结 了 http.ServerRequest 对 象 的 事件 及 其 主要 属性 。 
表 22.3 http.ServerRequest 的 事件 























事件 名 事件 处 理 程 序 说 明 

data function(chunk) 人 在 收 到 HTTP 请 求 正 文 ( 即 所 谓 的 POST 数据 等 信息 时 发 生 。 参数 chunk 是 一 个 Buffer 
对 象 或 者 字符 串 

end function() {} 在 1 个 HTTP 请 求 处 理 结 束 时 发 生 

close function(err) 全 在 请 求 处 理 中 出 现 网 络 错误 或 超时 情况 时 发 生 


























表 22.4 http.ServerRequest 中 主要 的 属性 






































属性 名 说 明 

url 请 求 URL 字符 串 ( 包含 了 查询 参数 ) 

method HTTP 方法 字符 串 ( 如 'GET' 或 'POST' 等 ) 

headers HTTP 请 求 头 部 所 组 成 的 关联 数组 对 象 

setEncoding(encoding=null) 如 果 将 字符 编码 指定 为 'utf8', 传递 将 一 个 字符 串 传 递 给 data 事件 的 事件 处 理 程序 中 的 chunk 参数 























如 果 从 输入 输出 的 角度 来 看 HITP 服务 器 处 理 ， 与 输入 相对 应 的 就 是 请 求 URL 及 其 头 部 信息 与 正文 
信息 。GET 方法 主要 通过 请 求 URL 中 的 查询 参数 来 接收 输入 信息 ， 而 POST 方法 则 主要 通过 请 求 正文 来 
获取 表单 数据 。 与 输出 对 应 的 是 所 返回 的 响应 。 
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可 以 通过 headers 属性 的 值 来 获取 请 求 头 部 。 该 属性 是 一 个 关联 数组 ， 且 以 头 部 名 称 为 键 ， 以 头 部 信 
息 的 值 为 该 键 所 对 应 的 值 ( 从 语言 规范 来 看 ， 这 是 一 个 普通 的 JavaScript 对 象 )。 头 部 名 称 全 都 被 进行 了 
标准 化 ， 而 转换 为 了 小 写字 母 。 下 面 是 个 具体 例子 。 


{ 'user-agent': 'curl/7.18.2 (i486-pc-linux-gnu) libcurl/7.18.2 OpenSSL/0.9.8g 
Zoya gs Madeley le aoa a 

nese ocalhost ee 

accept: '*/*', 

content-length':; '3', 

'content-type': 'application/x-www-form-unlencoded' } 


国 URL 分 析 处 理 

本 节 之 后 将 以 GET 方法 为 主 ， 说 明 分 析 URL 并 获取 其 查询 参数 的 值 的 方法 。 而 对 POST 方法 的 说 
明 将 留 到 之 后 章节 。 我 们 可 以 通过 http.ServerRequest 对 象 的 url 属性 来 获取 URL 路 径 及 其 查询 参数 的 
值 。url 参数 的 值 是 一 个 形 如 /path?foo=bar 的 字符 串 。 为 了 从 这 一 字符 串 中 获得 查询 参数 foo 的 值 bar， 
必须 对 其 进行 分 析 。 

用 于 对 URL 字符 串 进行 分 析 的 API 包含 于 "url 模块 之 中 。 用 于 对 查询 参数 进行 分 析 的 API 则 包含 
于 'querystring' 模块 中 。 图 22.1 是 一 个 具体 的 使 用 示例 。 


22.1 对 URL 字符 串 进 行 分 析 处 理 


svar Ur = Tequlrel Ure ys 





























// URL 字符 串 示 例 
> Var urlstring = 'http://www.example.com/path?foo=bar&baz=abc&baz=xy2Z'; 
> console.dqir(url.parse (urlstring)); // 通过 url .parse， 就 能 够 将 URL 路 径 与 查询 参数 分 离 
epee nee 

slashes: true, 

host: 'www.example.com', 

hostname: 'www.example.com', 

href" 'http://www.example.com/path?foo=bar&baz=abc&baz=xy2Z', 

search: '?foo=bar&baz=abc&baz=xy2z', 

query: 'foo=bar&gbaz=abc&baz=Xxyz'， 

pathname: '/path' } 


> console.dir(url.parse (urlstring, true)); 
// 将 true 传递 至 第 2 个 参数 ， 就 能 隐 式 地 对 query 属性 的 值 进行 分 析 ( 其 内 部 使 用 了 querystring 模块 ) 
‘rococo ee 

slashes: true, 

host: 'www.example.com', 

hostname: 'www.example.com', 

href" 'http://www.example.com/path?foo=bar&baz=abc&baz=xy2Z', 

Gl-haole !?foo=bar&baz=abc&baz=xYz' ， 

Suer GE5SRLLOSTUREOSZA LE 

pathname: '/path' } 


> Var querystring = require('querystring'); 

// 对 'foo=bar&gbaz=abc&baz=xyz' 进行 分 析 

> console.dir (duerysttring.parse (Url1.Parse(urlstzring) .Guery) ) ; 
eo Mocha ESD 


在 实际 的 Web 应 用 中 对 request.url 的 分 析 是 在 request 事件 处 理 程 序 中 进行 的 。 不 过 本 节 开 头 已 经 提 
到 过 ， 在 实际 的 开发 中 ， 这 类 处 理 通常 都 会 被 Web 应 用 程序 框架 隐藏 。 
国 22.1.3 响应 处 理 | 


我 们 可 以 通过 http.ServerResponse 类 来 处 理 响应 。 可 以 将 http.ServerResponse 对 象 传递 给 表 22.1 中 
request 事件 的 事件 处 理 程序 的 第 2 个 参数 。http.ServerResponse 是 一 个 继承 于 写 和 人流 的 类 。 
表 22.5 总 结 了 http.ServerResponse 所 含有 的 ， 与 构成 HTTP 请 求 的 元 素 相对 应 的 5 种 方法 。 
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表 22.5 HTTP 响应 的 元 素 及 http.ServerResponse 中 相应 的 方法 





http.ServerResponse 中 的 方法 











状态 码 writeHead()。 也 可 以 对 statusCode 属性 直接 赋 以 数值 
响应 头 部 writeHead()、setHeader() 
响应 正 write()、end!() 




















关于 writeHead 方法 的 使 用 示例 ， 请 参见 代码 清单 21.4。 代 码 清单 22.1 是 setHeader 方法 及 响应 正文 
输出 的 具体 示例 。 

代码 清单 22.1 的 代码 对 write 方法 进行 了 多 次 调用 。 在 服务 器 返回 响应 后 ， 客 户 端 将 会 接收 到 一 个 
响应 ， 其 响应 正文 为 字符 串 foobarbaz"。 


| 代码 清单 22.1 ”响应 处 理 


annmeepeom tee createserver (function (zequest， response) { 
// 在 输出 响应 正文 前 ， 必 须 对 头 部 信息 进行 设 


response.setHeader ('Content-Type', 'text/plain'); 


// 为 了 输出 响应 正文 ， 需要 多 次 对 write 方法 进行 调用 ( 直至 调用 了 end 方法 为 止 ) 
response.write('foo'); 
response.write('bar'); 
// 可 以 将 下 面 的 第 2 行 省 略 ， 只 写 response .write('bar') ;一句 
response.write('bar'); 
response.end(); 

}) .listen(8080); 


write 方法 及 end 方法 的 参数 可 以 接受 字符 串 值 或 Buffer 对 象 。 如 果 传 递 了 一 个 字符 串 到 参数 ， 而 需 

通过 方法 的 第 2 个 参数 来 设 定 字符 编码 。 默 认 情况 下 字符 编码 为 mtfg'， 因 此 ， 通 常 也 可 以 省 略 这 一 参 
数 。 如 果 传 递 了 一 个 Buffer 对 象 ， 则 将 会 发 送 其 相应 的 字 节 序列 。 

调用 end 方法 就 意味 着 要 结束 响应 的 输出 。 如 果 只 是 离开 了 回调 函数 ， 并 不 意味 着 响应 处 理 已 经 结 
束 ， 对 此 请 加 以 注意 。 


冯 22.1.4 POST 请 求 处 理 | 


只 有 在 读 取 了 HTTP 请 求 正文 之 后 ， 才 能 接收 POST 请 求 中 的 表单 数据 。 可 以 通过 表 22.3 中 的 事件 
来 执行 异步 处 理 ， 从 而 实现 这 一 读 取 操作 。 事 件 处 理 程序 的 参数 将 会 接收 响应 正文 的 内 容 。 默 认 情 况 下 ， 
响应 正文 是 一 个 Buffer 对 象 ( 字 节 序列 )。 如 果 事 先 通过 http.ServerRequest 对 象 中 的 setEncoding 方法 对 
字符 编码 进行 了 指定 ， 则 会 以 字符 串 的 形式 传递 这 一 参数 。 

传递 至 事件 处 理 程序 的 正文 数据 是 尚未 经 过 分 析 的 字符 串 ， 或 者 是 一 个 字 节 序列 。 需 要 通过 
querystring 模块 的 函数 ， 将 其 分 析 为 HTML 表单 中 的 表单 域名 与 表单 域 的 形式 。 代 码 清单 22.2 是 个 具体 
的 例子 。 

代码 清单 22.2 中 代码 的 功能 是 分 析 表 单数 据 ， 并 将 其 转换 为 文本 数据 ， 之 后 将 该 文本 作为 响 
有 返回。 代码 清单 22.2 通过 for in 循环 枚 举 了 所 有 的 表单 域 。 如 果 需 要 获取 特定 的 表单 域 ， 则 可 以 使 
formdata['fieldname'] 的 形式 来 对 其 进行 访问 。end 事件 的 作用 是 检测 正文 数据 的 读 取 是 否 已 经 完成 ， 不 
过 ， 代 码 清单 22.2 并 没有 使 用 该 事件 。 


| 代码 清单 22.2 ”POST 请 求 处 理 

























































































































































































开导 




















var httpd = http.createServer (function (request, response) { 
request .setEncoding('utf8'); 
request.on('data', function(chunk) { 


// 由 于 上 一 行 中 使 用 了 setEncoding 方法 ，chunk 将 会 是 一 个 字符 串 





























中 从 HTTP 层面 上 来 看 ， 请 求 是 以 chunked 的 字符 编码 发 送 的 。 然 而 ，HTTP 客户 端的 操作 不 应 该 依赖 于 所 传送 响应 的 字 
符 编 码 格式 。 


图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 


@@ 378 一 一 一 第 6 部 分 服务 器 端 JavaScript 


























Var querystring = require('gquerysting'); var formdata = querystring.parse (chunk); 
// 将 正文 数据 作为 表单 的 输入 值 进行 分 析 
var arre Sl 
for (var key in formdata) { 
arr.push(key + '=' + formdata[key]); // 通过 这 种 方式 ， 获 取 表 单 中 的 各 个 表单 域 值 
} 
response.setHeader ('Content-Type', 'text/plain'); 
response.end (arr.join(',')); 
J 
request.on('end', function() { 














| // 请 求 正文 读 取 完 成 后 的 处 理 
Ds 


}) .listen(8080); 


| 22.2 HTTP 客户 端 处 理 


可 以 通过 http.ClientRequest 类 与 http.ClientResponse 类 ,来 执行 HTTP 客户 端 处 理 了” HTTP 客户 端 处 
理 的 基本 结构 如 下 所 示 。 

@ 创建 http.ClientRequest 对 象 。 

@ 向 http.ClientRequest 对 象 的 response 事件 添加 事件 处 理 程序 

@ 对 http.ClientRequest 对 象 进行 请 求 写 入 操作 ( 必须 调用 end 方法 )。 

@ response 事件 的 事件 处 理 程序 将 会 接收 一 个 http.ClientResponse 对 象 ， 可 以 从 该 对 象 中 获取 响应 信息 。 


HTTP 客户 端 处 理 的 内 容 仅 有 在 发 出 请 求 后 等 待 啊 应 而 已 。 可 以 通过 write 方法 与 end 方法 来 对 请 求 
正文 进行 写 入 操作 。 如 果 调 用 了 end 方法 ， 就 表示 请 求 处 理 已 经 完成 。 即 使 没有 请 求 正 文 ， 也 需要 调用 
end 方 法。 如果 没有 调用 end 方法 ， 请 求 处 理 就 不 会 结束 ， 对 此 请 加 以 注意 。 而 等 待 响应 的 操作 则 一 如 既 
往 地 ， 是 借助 于 事件 来 实现 的 ， 这 也 符合 Node.js 风格 。 这 时 ， 要 使 用 的 事件 是 http.ClientRequest 对 象 中 
的 response 事件 。 

代码 清单 22.3 是 一 个 HTTP 客户 端 处 理 的 代码 示例 。 虽 然 也 能 通过 new 来 创建 http.ClientRequest 对 
象 ， 不过， 我 们 习惯 通过 http.request 函数 来 创建 该 对 象 。http.request 函数 的 第 1 个 参数 将 会 接收 所 连 
接 的 服务 器 的 信息 ， 而 其 第 2 个 参数 则 会 接收 一 个 回调 函数 。 传 递 给 这 一 参数 的 函数 将 会 被 作为 http. 
ClientRequest 对 象 中 response 事件 的 事件 处 理 程序 。 代 码 清 单 22.3 没有 使 用 http.request 函数 的 第 2 个 参 
数 ， 而 是 显 式 地 使 用 了 on 函数 。 


| 代码 清单 22.3 ”Node.js 中 的 HTTP 客户 端 
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Var ante = Peaqulel nee 


// 所 连接 的 服务 器 的 信息 
var options = { 
host: 'www.google.com', 
PorC on 
all 
method:; 'GET!" 


bs 


// 返回 值 是 一 个 http.ClientRequest 对 象 
Var req = http.request (options); 

















(D http.Client 类 是 一 个 较 旧 的 API。 之 所 以 现在 它 仍 然 存 在 ， 仅 仅 是 出 于 兼容 性 的 考虑 。 今 后 请 大 家 使 用 http.ClientRequest 
和 http.ClientResponse。 
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// 这 一 回调 函数 将 在 收 到 响应 时 被 调用 ( 也 可 以 将 其 传递 至 上 面 的 http.zequest 函数 的 第 2 个 参数 ) 
req.on ('zesponse'，function(res) { // 传递 给 事件 处 理 程序 的 参数 res， 是 一 个 http.ClLientResponse 对 象 
// 在 调用 了 setEncoding 之 后 ， 下 面 的 chunk 将 是 一 个 字符 串 ( 如 果 没 有 调用 ， 则 会 是 一 个 Buffer 对 象 ) 


res.setEncoding('utf8'); 


// 读 取 响应 正文 
res.on('data', function(chunk) { 
console, LIog ("BODY,. + ChunkE)s; 


yy 












































有 
// 如 果 发 生 了 错误 ， 则 会 调用 该 事件 处 理 程 序 


req.on('error', function(e) { 
console.log('error: ' + e.message); 
I 
// 如 果 响应 中 包含 有 正文 ( 如 POST 处 理 等 )， 则 通过 write 对 正文 进行 写 入 。 可 以 多 次 调用 write 
// req.write('request body data'); 


// 调用 了 end 方法 之 后 ， 就 表示 请 求 已 经 被 发 送 。 即 使 没有 使 用 write 方法 ， 也 必须 调用 end 方法 
req.end (); 


response 事件 的 事件 处 理 程序 将 会 接收 一 个 http.ClientResponse 对 象 作 为 参数 。 可 以 从 该 对 象 中 获 
取 响 应 的 正文 信息 。 如 代码 清单 22.3 所 示 ， 我 们 可 以 通过 data 事件 ， 以 异步 处 理 的 方式 读 取 正 文 信息 。 
data 事件 的 事件 处 理 程 序 的 参数 将 会 接收 响应 的 正文 数据 。 如 果实 现 通过 setEncoding 方法 指定 了 字符 编 
码 ， 正 文 数据 则 会 被 转换 为 字符 串 型 ， 和 否则 将 以 Buffer 对 象 ( 字 节 序列 ) 的 形式 获取 响应 正文 。 

http.get0 是 一 种 特殊 的 GET 方法 ， 它 是 一 个 在 GET 的 基础 上 简化 而 成 的 API。 且 该 API 在 其 内 部 隐 
式 地 执行 了 类 似 于 req.end0 的 操作 ， 使 用 起 来 很 容易 。 由 于 较为 简单 ， 这 里 就 不 再 对 其 使 用 方法 进行 说 明 。 


22.3 | HTTPS 处 理 


接 下 来 ， 我 将 介绍 HTTPS 处 理 。 为 了 运行 一 个 HTTPS 服务 器 ， 需 要 做 一 些 准备 工作 。 由 于 本 书 并 
非 专门 介绍 HTTPS 的 图 书 ， 因 此 本 节 仅 说 明 使 用 自 签 名 证 书 搭建 简易 HTTPS 服务 器 的 方法 。 






































































































































国 22.3.1 通过 openssl 指令 发 布 自 签 名 证 书 的 方法 | 
本 节 将 介绍 通过 openssl 指令 发 布 自 签名 证 书 的 方法 。 只 需 执 行 以 下 代码 即 可 。 


// 通过 openssl 指令 发 布 自 签名 证 书 


$ openssl req -new -x509 -keyout key.pem -out cert.pem 


在 执行 了 这 一 代码 之 后 ， 系 统 将 会 以 会 话 的 形式 询问 私 钥 的 口令 短语 和 证 书 的 可 分 辨 名 称 (DN )， 
需要 按 要 求 输入 这 些 信息 。 完 成 后 ， 将 会 获得 2 个 输出 文件 ， 其 中 keypem 是 私 钥 文 件 ， 而 certpem 则 
是 证 书 文件 。 这 两 个 文件 的 文件 名 是 可 以 任意 选择 的 ， 不过， 由 于 之 后 将 在 Nodejs 代码 中 对 其 进行 引 
用 ， 因 此 需要 确保 此 处 的 名 称 与 代码 中 所 使 用 的 名 称 相 一 致 。 


国 22.3.2 HTTPS 服务 器 l 


在 代码 清单 22.4 的 代码 示例 中 ,我们 通过 所 生成 的 私 钥 和 证 书 创建 了 一 个 HTTPS 服务 器 。 其 中 ， 
使 用 了 8443 号 端口 。 在 启动 服务 器 之 前 ， 需 要 将 私 钥 与 证 书 这 两 个 文件 存放 于 相应 路 径 。 


| 代码 清单 22.4 HTTPS 服务 器 
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Var optionse 
key: fs.readFileSync('key.pem'), 
cert: fs.readFileSync('cert .pem') 


和 


var httpsd = require('https') .createServer (options, function(request, response) { 
response.writeHead(200, {'Content-Type': 'text/plain'}); 
response.end('Hello World\n'); 
}) .listen(8443); 
可 以 像 下 面 这 样 ， 通 过 curl 指令 确认 其 运行 情况 。 在 使 用 了 -k 选项 后 ， 即 使 不 指定 可 分 辨 名 称 ， 也 
不 会 发 生 错误 。 


Soeur neeos loaalhnose. aL, 














// 或 者 ， 可 以 将 通过 openssl 指令 所 生成 的 cert .pem 存放 于 相应 路 径 ， 并 执行 以 下 指令 


// ( 这 时 ， 如 果 可 分 辨 名 称 等 信息 不 正确 ， 则 会 发 生 错 误 ) 

Sourl cacert cert pemhneteps /localhost: ea 

只 要 将 代码 清单 22.3 中 的 require('http') 替换 为 require('https”)， 即 可 得 到 HTTPS 客户 端的 代码 示例 ， 
因此 不 再 袭 述 。 























| 22.4 | Socket.IO 与 WebSocket 


本 书 第 4 部 分 介绍 了 通过 Node.js 实现 了 WebSocket 的 代码 示例 。 第 4 部 分 所 使 用 的 是 websocket- 
server 包 ， 本 节 将 会 介绍 一 个 通过 Socket.IO 包 来 实现 该 功能 的 例子 。 

Socket.IO 并 不 是 一 个 专用 于 WebSocket 的 包 ，WebSocket 是 该 包 所 提供 的 基础 技术 之 一 ， 通 过 该 包 ， 
能 够 实现 各 种 类 型 的 Web 实时 通信 功能 。 如 果 运 行 环 境 不 支持 WebSocket， 可 以 使 用 第 17 章 介绍 的 长 轮 询 
等 替代 方式 ， 来 实现 Web 实时 通信 。 此 时 ， 无 需 考 虑 这 些 方法 使 用 了 哪些 底层 技术 。 

我 们 可 以 在 下 面 的 站 点 中 获取 Socket.IO 包 的 相关 信息 。 

http://socket.io/ 


我 们 可 以 通过 下 面 的 npm 指令 来 安装 SocketIO 包 。 


在 SocketIO 包 中 ， 集 成 了 针对 Node.js 所 使 用 的 服务 器 端 JavaScript 库 ， 及 运行 于 浏览 器 中 的 客户 
端 JavaScript 库 。 于 是 ， 在 使 用 该 包 时 ， 我 们 能 够 在 服务 器 端 和 客户 端 同 时 使 用 JavaScript 这 一 程序 设计 
语言 。 得 益 于 此 ， 我 们 可 以 在 开发 中 使 用 (几乎 ) 相同 的 API。 

下 面 是 在 服务 器 端 (Node.js ) 中 使 用 Socket.IO 包 的 基本 方式 。 

@ 调用 Socket 对 象 的 listen 方法 。 

@ 通过 io.sockets 的 connection 事件 ， 获 取 一 个 已 经 与 客户 端 建立 了 连接 的 io.Socket 对 象 。 

@ 通过 io.socket 的 emit 方法 来 发 送 消息 ( 可 以 指定 任意 的 事件 名 )。 

@ 通过 io.socket 的 事件 来 接收 消息 。 

在 客户 端 (浏览 器 ) JavaScript 中 使 用 Socket.IO 时 ， 需 要 在 代码 中 通过 <script src="socket.io.js"> 
</script> 来 读 取 Socket.IO 所 提供 的 客户 端 文件 。 其 本 使 用 方式 如 下 所 示 。 

@ 通过 io.connect(' 服务 器 URL') 来 创建 io.Socket 对 象 。 

@ 通过 io.socket 的 emit 方法 来 发 送 消息 ( 可 以 指定 任意 的 事件 名 )。 

@ 通过 io.socket 的 事件 来 接收 消息 。 
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下 面 的 代码 是 以 上 两 种 方式 的 简单 示例 (代码 清单 22.5 与 代码 清单 22.6 )。 服 务 器 端 与 客户 端 将 以 3 
秒 为 间隔 进行 消息 收发 操作 。emit 方法 的 第 1 个 参数 可 以 使 用 任意 的 事件 名 。 其 第 2 个 参数 可 以 接收 任 
意 的 对 象 或 值 ( 数值 及 字符 串 值 )。 一 旦 建立 了 联机 ， 两 者 的 结构 就 是 对 称 的 。 
| 代码 清单 22.5 ”在 服务 器 端 使 用 Socket.IO 


vario — regquirel(loooket lo msteni(eoeon 



































io.sockets.on('connection', function(socket) { 


// 取 事 件 名 为 'msg' ， 以 3 秒 一 次 的 频率 向 客户 端 发 送 对 象 


setInterval (function() { 
socket.emit('msg', { msg:'from server', now: new Date() }); 
|e OO 











// 接收 来 自 客户 端的 'msg' 事件 
socket .on('msg', function(data) { 
console.log('from client ', data); 


De 


socket .on('disconnect', function() { 
eensolenlog (diseonn 有 
} 
) 





| 代码 清单 22.6 ”在 客户 端 使 用 Socket.IO 


Soripe se seeRer on /er 
var socket Jo aconnece (ne / /localhnost ooo 


// 接收 来 自 服务 器 端的 'msg' 事件 
socket.on('msg', function(data) { 
console.log(data); 


}p 
// 取 事 件 名 为 'msg' ， 以 3 秒 一 次 的 频率 向 服务 器 端 发 送 对 象 


setIinterval (function () 
socket.emit ('msg', { msg:'from client', now: new Date() }); 
D000 








| 22.5 下 层 网 络 程序 设计 





压 22.5.1 下 层 网 络 处 理 | 


如 表 22.6 所 示 ，Nodejs 提供 了 一 些 用 于 执行 下 层 网 络 处 理 的 模块 。 这 些 模块 将 被 用 于 进行 所 谓 的 套 
接 字 程 序 设计 。 

如 果 采 用 的 是 HTTP 或 SMTP 等 具有 明确 规则 的 通信 协议 ， 使 用 专用 模块 将 更 为 方便 。 而 套 接 字 层 
程序 设计 将 会 使 用 这 些 专用 模块 内 部 的 API。 在 设计 新 的 通信 协议 时 ， 我 们 也 会 进行 套 接 字 级 别 的 程序 
设计 。 在 这 一 层级 中 ,将 仅 执行 字 节 序列 的 收发 操作 。 这 时 ， 上 层 通信 协议 将 会 对 所 收发 的 字 节 序列 的 
内 容 及 发 送 顺序 的 含义 进行 解释 。 


表 22.6 下层 网 络 模块 
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模块 名 说 明 

net 于 TCP 套 接 字 程 序 设计 
dgram 于 UDP 套 接 字 程 序 设 计 
dns 于 域名 解析 ( DNS ) 
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本 书 将 说 明 net 模块 的 使 用 方法 ， 而 对 dgram 及 dns 模块 的 说 明 则 将 省 略 。 关 于 它们 的 详细 内 容 ， 请 
参见 各 自 的 API 参考 文档 。 


国 22.5.2 套 接 字 的 定义 | 


在 传统 的 网 络 数据 收发 中 ,使 用 了 一 种 名 为 套 接 字 的 抽象 屋 。 试 想 ， 在 通信 双方 间 有 一 条 一 一 对 应 
的 虚拟 连 线 ， 在 这 条 线 的 两 端 ， 将 对 数据 进行 读 写 操作 。 人 们 对 这 两 个 端点 的 功能 进行 抽象 ， 并 将 其 命 
名 为 套 接 字 。21.3.11 节 已 经 介绍 了 专用 于 数据 读 写 的 流 。 套 接 字 正 是 一 种 流 。 本 节 将 仅 对 TCP 套 接 字 进 
行 说 明 。UDP 套 接 字 的 原理 与 其 稍 有 不 同 ， 在 使 用 时 需要 加 以 注意 。 

对 套 接 字 流 进行 数据 读 写 操作 是 下 层 网 络 程序 设计 的 基本 内 容 。 只 要 在 通信 中 从 套 接 字 流 中 读 取 数 
据 ， 就 能 够 获取 对 方 所 发 送 的 数据 。 而 在 通信 中 将 数据 写 和 人 套 接 字 流 之 后 ， 该 数据 就 会 被 发 送 至 对 方 。 
不 同 于 文件 流 与 内 存 流 ， 对 于 套 接 字 流 来 说 ， 对 方 将 会 根据 情况 决定 是 否 读 取 所 接收 的 数据 。 如 果 是 数 
据 接收 方 ， 是 否 能 够 收 到 数据 也 是 由 对 方 决 定 的 。 

图 套 接 字 的 类 型 

在 使 用 套 接 字 之 前 ， 首 先 需 要 与 通信 对 象 建立 连接 。 而 要 识别 连接 对 象 ， 则 先 要 获得 对 方 的 人 地 
址 。 在 识别 连接 对 象 时 ， 还 需要 用 到 端口 号 。 可 以 将 IP 地址 直观 地 理解 为 识别 对 主机 进行 识别 的 依据 ， 
而 将 端口 号 理解 为 对 主机 中 特定 进程 进行 指定 的 依据 。 

在 网 络 通信 中 常常 会 使 用 服务 器 与 客户 端 这 样 的 名 称 来 区 分 通信 双方 。 而 对 于 套 接 字 来 说 ， 并 不 会 
区 分 服务 器 与 客户 端 。 在 这 种 情况 下 ， 仅 存在 等 待 连接 的 套 接 字 ( 被 动 套 接 字 ) 与 主动 连接 的 套 接 字 
( 主动 套 接 字 ) 这 两 种 分 类 。 通 常 ， 服 务 器 将 会 使 用 被 动 套 接 字 ， 而 客户 端 则 会 使 用 主动 套 接 字 。 

在 创建 被 动 套 接 字 时 ， 需 要 指定 等 待 端口 。 在 创建 主动 套 接 字 时 ， 需 要 指定 连接 对 象 的 卫 地 址 及 
端口 。 主 动 套 接 字 自 身 的 端口 号 通常 会 由 系统 任意 指定 ， 通 常 ， 系 统 会 选择 一 个 空闲 端口 作为 套 接 字 
的 端口 。 
图 套 接 字 的 执行 方式 

主动 套 接 字 将 会 尝试 与 正在 等 待 的 被 动 套 接 字 连接 。 如 果 等 待 中 的 套 接 字 接 受 了 连接 请 求 ， 则 会 自 
动 创建 一 个 接收 套 接 字 。 

在 建立 了 连接 之 后 ， 就 能 通过 套 接 字 在 通信 双方 间 相互 进行 数据 读 写 操作 。 实 际 进行 这 一 数据 通信 
过 程 的 ， 是 接收 套 接 字 ( 服务 器 端 ) 和 主动 套 接 字 ( 客户 端 )。 之 前 等 待 的 连接 套 接 字 将 不 会 参与 通信 ， 
对 此 请 加 以 注意 。 
虽然 接收 套 接 字 和 主动 套 接 字 在 名 称 和 创建 方式 上 各 不 相同 ， 但 其 执行 方式 却 是 对 称 的 。 换 句 话 说 ， 
在 连接 开始 之 前 ， 两 者 的 执行 方式 是 不 对 称 的 ， 而 在 建立 了 连接 之 后 ， 则 不 存在 是 由 哪 一 方 发 起 连接 的 
区 别 。 一 旦 连接 被 建立 ，2 个 套 接 字 之 间 的 关系 是 对 称 的 ， 双 方 都 可 以 进行 数据 发 送 。 同 时 ， 双 方 也 都 
可 以 通过 套 接 字 的 关闭 方法 来 结束 通信 。 

需要 注意 的 是 ， 之 前 等 待 的 套 接 字 将 会 就 此 保留 。 如 果 有 来 自 其 他 客户 端的 连接 请 求 ， 则 会 继续 创 
建新 的 接受 套 接 字 。 如 此 一 来 ， 具 有 被 动 套 接 字 的 计算 机 ( 通常 是 服务 器 进程 ) 可 以 同时 接受 来 自 多 个 
(客户 端 ) 计算 机 的 连接 。 


国 22.5.3 套 接 字 程 序 设计 的 基本 结构 | 
服务 器 端 代码 的 基本 结构 如 下 所 示 。 


@ 调用 net.createServer()， 通 过 其 返回 值 获取 net.Server 对 象 ( 将 事件 处 理 程 序 connection 传递 至 
createServer 的 参数 )。 
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@ 调用 net.Server 对 象 的 listen 方法 ， 进 入 连接 等 待 状态 。 

@ 通过 net.Server 对 象 的 connection 事件 处 理 程序 的 参数 ， 获 取 与 客户 端 建立 了 连接 的 接收 套 接 字 ( net. 
Socket 对 象 )。 

@ 通过 write 方法 向 net.Socket 对 象 写 入 数据 , 并 通过 data 事件 执行 读 取 操 作 ( 每 个 客户 端 都 需要 进行 套 接 
字 操 作 )。 

@ 通过 net.Socket 对 象 的 close 事件 或 error 事件 来 结束 与 每 一 个 客户 端的 连接 。 

@ 调用 net.Socket 对 象 的 close 方法 来 切断 与 服务 器 的 连接 。 

@ 调用 net.Server 对 象 的 close 方法 ， 结 束 服务 器 2。 


上 一 节 已 经 介绍 过 ，net.Server 类 相当 于 等 待 连接 的 套 接 字 。 在 系统 调用 层 或 POSIX API 层 中 等 待 连 
接 的 套 接 字 和 用 于 数据 收发 的 套 接 字 是 同一 种 套 接 字 。 不 过 ， 将 前 者 看 作 具 有 另 一 种 功能 的 套 接 字 ( 创 
建 用 于 套 接 字 流 的 套 接 字 工厂 ) 更 好 理解 。 因 此 ， 将 其 抽象 为 net.Server 类 是 一 种 恰当 的 设计 。net.Server 
类 起 到 了 接收 套 接 字 的 容器 的 功能 。 
通过 connection 事件 ， 可 以 得 到 接受 套 接 字 对 象 。21.3.11 市 已 经 介绍 了 流 的 基本 读 写 操作 。 可 以 通 
过 write 方法 对 套 接 字 流 进行 写 入 操作 ， 通 过 data 事件 读 取 其 数据 。 

客户 端 代码 的 基本 结构 如 下 所 示 。 

@ 调用 new.createConnection()， 以 获取 net.Socket 对 象 ( 主动 套 接 字 )。 

@ 调用 net.Socket 对 象 的 connect 方法 ， 向 参数 所 指定 的 服务 器 发 起 连接 。 

@ 通过 net.Socket 对 象 的 connect 事件 来 判断 是 否 成 功 连接 。 

@ 通过 write 方法 向 net.Socket 对 象 写 入 数据 ， 并 通过 data 事件 执行 读 取 操 作 。 

@ 通过 net.Socket 对 象 的 close 事件 或 error 事件 来 结束 与 每 一 个 服务 器 的 连接 。 

@ 对 net.Server 对 象 调用 close 方法 ， 以 切断 与 服务 器 的 连接 。 


一 旦 连接 建立 ， 就 会 触发 connect 事件 。 对 主动 套 接 字 进行 读 写 操作 的 方法 与 服务 器 中 的 情况 
相同 。 
正如 前 一 节 所 介绍 的 ， 连 接 一 旦 被 建立 ， 服 务 器 端 与 客户 端 将 会 对 net.Socket 对 象 使 用 相同 的 读 写 操 
作 。 这 里 并 不 是 笼统 地 将 两 种 不 同 的 操作 视 为 了 相同 操作 。 之 所 以 说 两 者 是 相同 的 ， 是 因为 从 本 质 上 来 看 ， 
该 套 接 字 的 执行 方式 是 对 称 的 。 虽 然 等 待 连接 的 〈 服务 器 端 ) 套 接 字 和 进行 连接 的 ( 客户 端 ) 套 接 字 在 最 
初 是 非 对 称 的 ， 不 过 只 要 建立 了 连接 ， 两 者 就 不 再 有 任何 差别 了 。 双 方 都 可 以 通过 套 接 字 发 送 数据 ， 或 者 
对 所 收 到 的 数据 进行 读 取 。 从 程序 的 角度 来 看 ， 它 们 都 是 可 供 读 写 的 流 。 

表 22.7 列 出 了 net.Socket 类 的 一 些 属性 。 表 22.8 列 出 了 net.Socket 类 中 主要 的 事件 。 
















































































































































































表 22.7 net.Socket 的 属性 






















































































connect(port, [host], [callback]) 连接 指定 的 服务 器 

setEncoding(lencoding) 如 果 指 定 了 字符 编码 ， 传 递 给 data 事件 处 理 程序 的 参数 则 会 被 转换 为 字符 串 

write(data, [encoding], [callback]) 将 字符 串 值 或 Buffer 对 象 ( 字 节 序 列 ) 写 入 套 接 字 

end([datal, [encoding]) 将 字符 串 值 或 Buffer 对 象 ( 字 节 序列 ) 写 入 套 接 字 ， 并 在 完成 后 结束 写 入 操作 

destroy() 关闭 套 接 字 ( 销毁 ) 

pausel) 暂停 发 出 data 事件 

resumel) 继续 发 出 之 前 通过 pause 暂停 发 出 的 data 事件 

setTimeout(timeout, [callback]) 对 套 接 字 设 定 超时 值 ( 单位 为 毫秒 )。 如 果 超 时 ， 将 会 发 出 timeout 事件 。 可 以 通 
过 第 2 个 参数 来 接收 timeout 事件 处 理 程序 

address!) 返回 套 接 字 的 本 地 地 址 
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表 22.8 new.Socket 中 的 主要 事件 













































































































































































事件 名 事件 处 理 程 序 说 明 

connect | function() 人 在 套 接 字 连接 被 建立 后 发 生 ( 用 于 主动 套 接 字 中 ) 

data function(data) 人 在 读 取 数据 时 发 生 。 事 件 处 理 程序 的 data 参数 可 以 是 字符 串 或 Buffer 对 象 

end function() 人 在 数据 读 取 完 成 时 发 生 

timeout “| function() 人 在 超时 时 发 生 ( 默认 情况 下 不 会 发 生 。 只 有 在 通过 setTimeout 方法 显 式 地 指定 了 超时 值 之 后 才 

会 发 生 ) 

drain function() 人 在 写 入 缓冲 区 已 满 而 导致 write 方法 失败 后 ， 缓 冲 区 将 会 被 清空 。 该 事件 将 在 缓冲 区 被 清空 时 发 生 
error function(exception) 人 | 在 出 现 错误 时 发 生 

close function(had_error) {f | 在 套 接 字 被 关闭 时 发 生 
国 22.5.4 套 接 字 程 序 设计 的 具体 实例 | 

上 一 节 介 绍 了 套 接 字 通 信 中 代码 基本 结构 。 本 节 将 会 介绍 一 些 具体 的 代码 示例 (代码 清单 22.7 与 代 


码 清单 22.8 )。 
在 服务 器 端的 代码 ( 代码 清单 22.7 ) 中 ， 





我 们 选择 9000 号 端口 等 待 来 自 





客户 端的 连接 。 当 收 到 来 自 























客户 端的 连接 请 求 时 ， 将 会 发 生 connection 事件 。 可 以 通过 事 价 
从 该 对 象 的 data 事件 
后 ， 将 会 通过 sock.write 向 客户 端 输出 消 ， 

在 客户 端的 代码 (代码 清单 22.8 ) 中 ， 将 会 连接 localhost 





自 


Co 
































connect 事件 。 之 后 ， 可 以 通过 write 方法 发 送 数据 ， 并 通过 data 事件 等 待 回复 。 
在 下 面 的 代码 中 ， 客 户 端 将 会 发 送 一 条 消息 ， 之 后 ， 服 务 器 将 会 据 此 返 




















决定 了 处 理 方式 ， 





其 他 的 计算 机 中 ， 则 需要 通过 createConnection 的 参数 来 指定 远程 卫 地 址 。 在 建立 连接 后 ， 将 会 发 生 


因此 可 以 随意 地 设计 通信 协议 。 此 外 ， 在 这 一 代码 中 ， 如 明 


F 处 理 程序 的 参数 来 获取 接收 套 接 字 对 象 。 


Pp 可 以 获取 所 接收 的 数据 。 在 以 标准 输出 格式 将 所 读 取 的 数据 输出 至 console.log 之 





的 9000 号 端口 。 如 果 服 务 器 进程 运行 于 








Cc 


发 生 超 时 ， 就 将 会 切断 通 








回 一 条 消息 。 由 于 已 经 事 9 





信 。 而 在 实际 的 应 用 中 ， 协 议 的 设计 者 还 需要 考虑 如 何以 恰当 的 方式 结束 通信 。 
































可 以 通过 telnet 或 nc 指令 来 确认 客户 端的 执行 情况 。 请 确认 服务 器 是 否 能 够 同时 连接 多 个 客户 端 ， 
以 正确 执行 并 行 通 信 。 由 于 此 时 采用 的 是 异步 网 络 处 理 ， 因 此 服务 器 端 不 使 用 多 线程 ， 也 能 够 实现 与 多 
个 客户 端的 连接 。 
上 代码 清单 22.7 服务 器 端的 代码 示例 

Var net = require('net'); 


Var server = net.createServer () ; 
server.listen(9000); 


server.on('connection', function(sock) { 
so secEneodanel( oerEor 
sock.setTimeout (3000) 7 
sock.on('data', function(data) { 
cemseoles lo via elene ll dacar el 


sock.write('hello from server'); 


{ 


} 

onl en Even 
sock.destroy (); 

} 


onl onsen one om 
sock.destroy (); 
} 


on Emmeowe re Ee 
sock.destroy (); 
} 


.On 


{ 


{ 





(relose,, funcetion() { 
console.log('closed'); 


Wy 


// 显示 所 接收 的 数据 
// 在 收 到 数据 后 ， 再 发 送 一 些 数据 
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| 代码 清单 22.8 ”客户 端的 代码 示例 


var net = require('net'); 
Var sock = net.createConnection(9000); 


sock.on('connect', function() { 
sock.setEncoding('utf8'); 
sock.setTimeout (3000); // 3 秒 
sock.write('hello from client'); 
}) 
Son dateau tunecion(adata 
econsole log(Vvia sercver RE daca Di)F // 显示 所 接收 的 数据 


onena me uneton( 
sock.destroy () ; 


IETTECFEUREEODEETSD 人 
sock.destroy () ; 





“on('timeoue' function() TH 
sock.destroy () ; 





onillelose ee tuncedom( 
process.exit ()，; 


网 区 
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22.6 | 文件 处 理 


在 Nodejs 中 ,我 们 可 以 通过 全 模块 来 执行 文件 处 理 ， 并 通过 path 模块 来 执行 与 文件 路 径 相关 的 处 


理 。 文 件 处 理 函 数 分 为 同步 和 异步 























种 版 本 。 对 于 异步 版 函数 ， 可 以 接收 一 个 回调 函数 作为 参数 ( 需要 


将 其 传递 至 函数 的 最 后 一 个 参数 )。 在 处 理 完 成 时 ， 将 会 调用 该 回调 函数 。 该 回调 函数 的 第 一 个 参数 是 一 
个 错误 参数 。 如 果 错 误 参 数 为 真 ， 则 表示 出 现 了 某 种 错误 。 
直到 前 一 节 为 止 ， Nodejs 中 的 网 络 函数 都 是 非 阻 塞 式 的 异步 函数 。 网 络 处 理 的 本 质 决 定 了 它 可 能 会 
花费 大 量 时 间 ， 因 此 ， 对 于 必须 以 事件 驱动 方式 执行 的 Nodejs 来 说 ， 这 些 非 阻 塞 式 操作 是 不 可 缺少 的 。 
而 另 一 方面 ， 在 对 文件 进行 操作 时 ， 读 取 操作 只 需 花 费 很 少 的 时 间 。 至 少 在 读 取 本 地 文件 时 情况 如 此 。 


因此 ， 即 使 将 事件 驱动 方式 与 同步 文件 读 取 操作 相 结合 ， 也 不 会 对 响应 性 能 产生 多 少 影 



































故 22.6.1 本 节 的 范例 代码 


本 节 所 有 的 范例 代码 之 前 ， 都 需要 首先 执行 代码 清单 22.9 中 的 代码 。 并 且 ， 这 里 假定 所 有 的 目标 文 
件 路 径 都 已 经 通过 命令 行 参 数 传递 给 了 代码 。 
| 代码 清单 22.9 进行 文件 处 理 时 所 需 执行 的 通用 操作 





























5 
var fpath = DSSSSER argv [lol // 命令 行 参 数 
A Moe 4 
process.exit (); 
} 





© 


不 过 ， 知 道 磁盘 读 取 的 速度 很 慢 的 读者 ， 或 许 不 赞同 这 一 观点 。 之 所 以 这 里 称 不 会 对 性 能 产生 影响 ， 


文件 API 视 为 一 种 同步 API， 但 从 操作 系统 ( 内 核 ) 的 层面 来 看 ， 它 们 仍然 是 以 异步 的 方式 执行 的 。 
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是 因为 虽然 可 以 将 
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我 们 可 以 通过 命令 行 参数 ， 将 指定 的 文件 名 传递 给 变量 fpath。 例 如 ， 如 果 将 代码 清单 22.9 中 的 代码 
保存 于 文件 myjs 中 ， 并 像 下 面 这 样 执行 node 指令 ，fpath 的 值 就 将 被 赋 为 foo.txt。 


$ node my.js foo.txt 


国 22.6.2 文件 的 异步 处 理 | 


下 面 是 以 异步 方式 调用 文件 的 stat 函数 的 例子 (代码 清单 22.10 )。stat 函数 的 参数 将 会 接收 一 个 文件 
路 径 ， 并 返回 以 此 为 路 径 的 文件 的 信息 。 不 过 ， 由 于 这 是 一 种 异步 处 理 ，stat 函数 并 不 会 直接 返回 文件 的 
信息 ， 而 会 以 回调 函数 参数 的 形式 返回 。 

上 代码 清单 22.10 以 异步 方式 调用 文件 的 stat 函数 


fs.stat (fpath, function(err, stats) {  // 通过 参数 来 指定 回调 函数 
if (err) throw err; 


console.log('stats: ', stats); // 通过 回调 函数 的 stats 参数 来 获取 文件 信息 
D> 






































执行 以 上 代码 ， 将 会 得 到 下 面 的 结果 。 


$ node stat.js /tmp 
stats: { dev: 2050, 
ino: 895841, 
mode: 17407, 
mT 
wade or 
Sid 0 


rdev: 0, 

size: 12288， 

blksize: 4096, 

plecksR 24 

atimer ‘Sun 26 Jun 201] 15311¢54 GMTI; 
mtime: Sun, 26 Jun 2011 14:38:51 GMT, 
ctime: Sun, 26 Jun 2011 14:38:51 GMT | 


回调 函数 的 第 1 个 参数 将 会 接收 错误 状态 ， 而 其 第 2 个 参数 则 会 接收 一 个 stat 对 象 〈stat 结构 体 )。 
可 以 从 上 面 的 执行 结果 中 ， 判 断 stat 对 象 的 属性 是 否 表示 man 2 stat。size 属性 在 实际 使 用 中 非常 重要 。 
该 属性 表示 目标 文件 的 大 小 ， 将 以 字 节 为 单位 。 

与 stat 函数 类 似 的 还 有 fstat 与 lstat 函数 。fstat 的 参数 接收 的 不 是 文件 路 径 ， 而 是 文件 描述 符 。 该 函 
数 将 在 之 后 的 文件 读 取 范 例 中 使 用 。lstat 与 stat 几乎 相同 ， 不 同 的 是 ， 当 它 的 文件 路 径 参 数 是 一 个 符号 
链接 时 ， 不 会 查看 链接 目标 。stat 函数 将 会 返回 符号 链接 的 链接 所 指定 的 文件 的 信息 。 而 lstat 函数 则 会 
返回 符号 链接 文件 的 信息 。 


国 22.6.3 文件 的 同步 处 理 | 
代码 清单 22.11 是 代码 清单 22.10 所 示 API 的 同步 版 。 
有 代码 清单 22.11 代码 清单 22.10 相对 应 的 同步 版 


wa Sea rosecarsyel(E oa 
eonsolenlo( statesr States 


上 述 代码 的 执行 结果 与 代码 清单 22.10 相同 。statSync 函数 的 返回 值 是 一 个 stat 对 象 。 为 了 与 代码 清 
单 22.10 对 应 ， 我 们 可 以 通过 与 代码 清单 22.10 相同 的 变量 名 来 接收 该 对 象 。 如 果 指 定 路 径 的 文件 不 存在 ， 
或 者 发 生 了 其 他 一 些 错误 ，statSync 函数 将 会 抛 出 一 个 异常 。 之 前 说 过 ，stat 函数 不 会 直接 抛 出 异常 ， 而 会 
将 该 错误 返回 给 回调 函数 的 第 1 个 参数 。 在 这 一 点 上 两 者 的 执行 方式 是 不 同 的 。 
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22.6.4 文件 操作 相关 函数 


表 22.9 分 别 列 出 了 一 部 分 文件 操作 相关 函数 的 同步 版 和 异步 版 。 其 中 ,异步 函数 仅 比 同步 函数 多 了 
一 个 回调 函数 参数 。 异 步 函 数 的 回调 函数 将 会 接收 1 个 表示 错误 状态 的 参数 。 





表 22.9 文件 操作 类 函数 ( 摘 选 ) 






































renameloldpath, newpath, callback) renameSync 重 命名 文件 
truncate(fd, len, callback) truncateSync 截取 文件 。 如 果 len 为 0， 则 会 清空 文件 
chmod(path, mode, callback) chmodSync 更 改 文件 的 权限 位 。 参 数 mode 的 含义 请 参见 下 文 
unlink(path, callback) unlinkSync j 除 文件 
我 们 首先 说 明 一 下 chmod 函数 所 接收 的 文件 权限 位 (mode )。 在 之 后 将 介绍 的 open 中 也 会 用 到 该 参 





























数 。 这 一 权限 位 的 标准 遵循 了 Unix 系 操 作 系 统 的 文件 系统 传统 规范 。 通 过 位 信息 ， 可 以 设 定 文件 的 所 有 
用 户 、 所 有 组 ， 及 其 他 权限 所 有 者 的 读 取 、 写 人 、 执 行 权 限 。 例 如 ， 对 于 utrwx (用 户 具 有 所 有 权限 )、 
gtrx (组 具有 读 取 及 执行 权限 )、atrx ( 其 他 用 户 具有 读 取 及 执行 权限 )， 依 次 将 其 转换 为 比特 位 1/0 的 形 
式 ， 再 转 为 8 进 制 数 ， 就 能 得 到 0755 这 一 结果 。 可 以 将 0755 这 个 值 指定 为 mode 的 值 。 

这 一 mode 值 存在 两 个 问题 。 其 一 是 8 进 制 数字 面 量 表示 问题 。ECMAScript 第 5 版 不 支持 从 0 开始 
的 8 进 制 数字 面 量 表示 ( 参见 第 2 部 分 中 的 3.4.1 节 )。 虽 然 也 可 以 通过 10 进 制 数 或 16 进 制 数 来 表示 权 
限 位 ， 不 过 这 样 一 来 ， 可 读 性 就 会 下 降 。 另 一 个 问题 是 可 移植 性 问题 。 目 前 来 看 ，mode 值 非常 依赖 于 
Unix 系 操作 系统 。 在 将 这 类 API 移植 到 其 他 的 操作 系统 时 ， 它 将 对 系统 有 着 过 强 的 依赖 性 。 随 着 今后 
Nodejs 所 支持 的 平台 越 来 越 多 ， 这 类 API 的 抽象 程度 可 能 会 逐步 提升 ， 这 一 问题 应 该 就 能 有 所 缓解 。 


转 22.6.5 文件 读 取 | 


在 Nodejs 中 ， 通 用 文件 读 取 处 理 也 采用 了 异步 处 理 的 方式 。 从 open 至 实际 的 读 取 操作 都 是 如 此 
(代码 清单 22.12 )。 

在 代码 清单 22.12 中 ，open 方法 的 参数 表示 只 读 模 式 。 也 可 以 用 require('constants).O_ RDONLY 
蔡 换 rr， 两 者 的 效果 相同 。 
有 代码 清单 22.12 整个 文件 读 取 操作 都 采用 了 异步 处 理 方式 


ESNoBen(Eeatn elon el 
if (err) throw err; 


































































































































































































temostat (fpache uneteron(ere stats) { 
if (err) throw err; 


fs.read(fd, new Buffer(stats.size), 0, stats.size, null, 
function(err, bytesRead, buf) { 
if (err) throw err; 


if (!bytesRead) return; 
consolle lo (Due Eostre dre: 
Ds : 

Dg 

异步 处 理 存在 代码 可 读 性 较 低 的 缺点 。 在 执行 文件 读 取 操作 时 ， 结 合 使 用 同步 处 理 的 方式 也 是 一 种 
可 选项 ( 代码 清单 22.13 与 代码 清单 22.14 )。 如 果 是 本 地 文件 ， 读 取 时 间 几 乎 可 以 忽略 。 这 时 ， 应 该 优 
先 考虑 代码 的 简洁 。 

非 要 追求 代码 的 可 扩 放 性 的 话 ， 则 应 遵循 Node.js 的 规范 ， 全 部 使 用 异步 处 理 。 不 过 这 种 做 法 并 不 能 
保证 最 快 的 响应 速度 。 书 写 代 码 时 应 该 优先 考虑 哪 一 方面 ， 是 由 系统 的 设计 思路 所 决定 的 ， 不 需要 过 分 
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拘泥 于 设计 出 唯一 正确 的 方式 。 
| 代码 清单 22.13 open 是 异步 处 理 ， 而 读 取 操作 是 同步 处 理 


Femopen(E san ne EL 
if (err) throw err; 











estac(ipaen mecion(er Eqs) { 
if (err) throw err; 


Var buf = new Buffer(stats.size); 
Var bytesRead = fs.readSync(fd, buf, 0, stats.size, null); 
if (!bytesRead) return; 
console.log(buf.tostring()); 
的 这 
1 


| 代码 清单 22.14 ”全 部 使 用 同步 处 理 


varete fev opensvynel(feathe 2T 反 

Var buf = new Buffer(4096); 

while (true) { 
var bpytesRead l= fs readsvnel(fd bute oo pouflengeEn oun) 
if (!bytesRead) break; 
eonsole log (bu EosEina ur 0 EesRead 


} 
fs.closeSync (fd); // 如 果 没 有 调用 close 或 closeSync， 则 会 发 生 资 源 泄漏 ， 对 此 请 加 以 注意 


还 存在 一 些 简单 的 文件 读 取 API。 下 面 是 readFile 和 readFileSync 的 代码 示例 ， 其 中 readFile 是 一 个 
异步 API， 而 readFileSync 则 是 一 个 同步 API ( 代码 清单 22.15 与 代码 清单 22.16 )。 


| 代码 清单 22.15 ”使 用 readFile 的 版 本 


// 直接 读 取 字 节 序列 
fs.readFile(fpath, function(err, buf) { 
if (err) throw err; 
eonsole No (om oS // Buffer 类 型 
DE 


// 指定 字符 编码 ， 以 字符 串 形式 进行 读 取 操 作 
sreadeile(toatn uceerm Funetlon (er Stee) 1 
if (err) throw err; 
eonsele oo // 字符 串 型 


) 






























































| 代码 清单 22.16 ”使 用 readFileSync 的 版 本 


// 直接 读 取 字 节 序列 
Var buf = fs.readFileSync (fpath); 
consoles log(buf tostering( 


// 指定 字符 编码 ， 以 字符 串 形 式 进行 读 取 操作 
VarSsE to reade le ELEESEDRARLLOTLASU 
console.log (str); 
































国 22.6.6 文件 写 入 | 


本 节 将 介 召 一 下 异步 文件 写 人 操作 的 代码 示例 ( 代码 清单 22.17 )。 需 要 注意 的 是 ， 在 对 流 调用 write 
方法 时 ， 可 能 会 发 生 异 常 ， 因 此 ， 通 常 需要 考虑 例 异 常 处 理 的 问题 。 不 过 ， 代 码 清单 22.17 并 没有 对 此 
进行 处 理 。 

有 代码 清单 22.17 异步 文件 写 入 操作 
Var buf = new Buffer('data to write'); 
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fsNopenl(Eoach wneeien(er oD 
if (err) throw err; 


femwelteel(Ea out putslengeh ne 


function(err, bytesWritten, wbuf) { 
if (err) throw err; 
Ls 


} 

代码 清单 22.18 是 同步 文件 写 入 操作 的 代码 示例 。 
有 代码 清单 22.18 同步 文件 写 入 操作 

var buf = new Buffer('data to write'); 


var fd = fs.openSync (fpath, 'w'); 


var pveeesnentteen tomwlitesvnel(tad Buta pu lengehe nan 


fsmelosesvyaecllea 





还 存在 一 些 简 单 的 文件 写 入 API。 下 面 是 writeFile 和 writeFileSync 的 代码 示例 ， 其 中 writeFile 是 一 





个 异步 API， 而 writeFileSync 则 是 一 个 同步 API ( 代码 清单 22.19 )。 
| 代码 清单 22.19 ”简单 的 文件 写 入 API 
Vb A 


fs.writeFile(fpath, buf, function(err) { 
if (err) throw err; 


Dg 


// 同步 API 
fs.writeFilesync (fpath, buf); 














21.3.11 节 介 绍 了 一 段 与 cat 拥有 相同 功能 的 代码 。 在 那 段 代码 中 ,使 用 了 util 模块 的 pump 两 数 。 可 








以 通过 文件 名 ， 来 得 到 相应 的 读 取 流 和 写 人 流 ， 因 此 ， 只 需 像 下 面 这 样 使 用 一 行 代码 ， 就 能 够 实现 复 甫 








文件 的 效果 。 
// 复制 文件 ， 并 将 其 保存 为 扩展 名 为 bak 的 新 文件 









































require('util') .pump (fs.createReadStream(fpath), fs.createWriteStream(fpath + '.bak')); 


国 22.6.7 目录 操作 
表 22.10 总 结 了 目录 操作 相关 的 API。 
表 22.10 ”目录 操作 相关 的 API 























函数 名 ( 异步 ) 

mkdir(path, mode, callback) mkdirSync 创建 目录 。 关 于 参数 mode， 请 参见 文件 操作 相关 函数 一 节 中 的 说 明 
rmdir(path, callback) rmdirSync 删除 目录 

readdir(path, callback) readdirSync 读 取 目 录 一 览 




















传递 给 mkdir 与 rmdir 的 回调 函数 只 会 接收 1 个 出 错 参数 。 而 传递 给 readdir 的 回调 函数 ， 则 会 接收 
昌文 件 名 字符 串 组 成 的 数组 。 代 码 清单 








出 错 参 数 及 文件 一 览 表 参数 这 两 个 参数 。 文 件 一 览 表 参数 是 一 个 日 
22.20 是 该 函数 的 使 用 示例 。 


| 代码 清单 22.20” 读 取 目 录 一 览 表 




















et 


文件 名 组 成 的 数组 





fereaddie (Epath function(ers enes AX files 是 
Tf (er Enrow er, 
files.forEach (function (filename) { 
console.log (filename); 
J 


J 
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类 22.6.8 对 文件 更 改 的 监视 


可 以 通过 表 22.11 
则 能 停止 文件 监视 


能 够 监视 文件 更 改 的 API 





表 22.11 


Pp 的 函数 监视 文件 的 更 改 。watchFile 函数 的 功能 是 开始 文件 监视 ， 而 unwatchFile 














































































































watchFile(filename, [options], handler) 当 指 定 文件 被 更 改 时 ， 将 会 调用 回调 函数 
unwatchFile(filename) 停止 对 指定 文件 的 监视 

watchFile 最 后 的 参数 将 会 接收 一 个 回调 函数 。 一 旦 文件 发 生 了 更 改 ， 该 回调 函数 就 将 被 调用 。 即 使 
所 传递 的 文件 路 径 不 存在 文件 ， 依然 可 以 对 其 进行 监 监视 。 这 时 ， 将 会 在 该 路 径 下 的 文件 被 创建 时 调用 回 
调 函 数 。 回 调 函 数 将 会 接收 两 个 参数 。 第 1 个 参数 是 当前 的 stat 对 象 ， 第 2 个 参数 是 文件 被 更 改 前 的 stat 
对 象 。 代 码 清 单 22.21 是 一 个 具体 的 例子 。 
有 代码 清单 22.21 watchFile 西数 的 使 用 示例 

fs.watchFile (fpath, function(curr, prev) { 

console.log('the current mtime is: ' + Curr.mtime); 

} console.log('the previous mtime was: ' + prev.mtime); 

De 
国 22.6.9 文件 路 径 | 

path 模块 包含 一 些 能 够 对 文件 路 径 进 行 处 理 的 API。 表 22.12 列 出 了 其 中 一 些 具 有 代表 性 的 函数 。 其 


中 ， 除 了 exists 相关 的 函数 外 ， 都 是 字符 串 处 理 相关 的 API。! 


设计 为 异步 API 的 形式 。 


表 22.12 ”path 模块 的 函数 ( 摘 选 ) 





























于 它们 不 需要 执行 IO 处 理 ， 因 此 没有 被 


























































































































































































































dirname(path) 返回 参数 所 指定 的 文件 路 径 中 ， 除 去 文件 名 以 外 的 部 分 
basename(path, ext) 返回 参数 所 指定 的 文件 路 径 的 文件 名 。 若 其 中 包含 扩展 名 ext， 则 将 去 除 该 扩展 名 
extname(path) 返回 参数 所 指定 的 文件 路 径 下 的 文件 扩展 名 
exists(path, callback) 检查 参数 所 指定 的 文件 路 径 下 是 否 存在 文件 ， 并 调用 回调 函数 。 该 回调 函数 具有 一 个 参数 ， 如 果 文 
件 存在 ， 则 其 值 为 true， 否 则 为 false 

existsSync(path) 如 果 参 数 所 指定 的 文件 路 径 下 存在 文件 ， 则 返回 true， 否 则 返回 false 

下 面 是 一 个 exists 函数 的 使 用 示例 (代码 清单 22.22 ) 
| 代码 清单 22.22 path.exists 函数 的 使 用 示例 

require('path') .exists (fpath, function(ret) { 

eonsoles loo(ree ?ser exioteuw :noe desm te pachy. 


J 


| 22.7 | 定时 器 





Nodejs 对 表 22.13 列 出 的 定时 右 函 数 提供 了 支持 。 
同 。 从 内 部 来 看 ， 它 们 都 是 timers 模块 的 函数 ， 不 过 | 








这 些 函 数 与 客户 端 (DOM ) 中 相应 函数 的 形式 相 
于 默认 情况 下 ， 该 模块 将 会 被 载 人 ， 因 此 在 使 用 





























前 不 需要 显 式 地 使 用 require 函数 。 
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表 22.13 ”定时 器 函数 













































































































































































setTimeout(callback, delay, [arg…]) 在 delay 毫秒 后 ， 以 参数 arg 调用 回调 函数 。 其 返回 值 为 timerld 
clearTimeout(timerld) 解除 由 timerld 所 指定 的 定时 器 回调 函数 
setInterval(callback, delay, [arg…]) 以 delay 毫秒 为 频率 ， 以 参数 arg 调用 回调 函数 。 返 回 值 为 intervalld 
clearlnteval(intervalld) 解除 由 intervalld 所 指定 的 间隔 定时 器 回调 函数 

回调 函数 中 的 this 引用 指向 的 是 全 局 对 象 。 如 果 和 希望 其 引用 其 他 的 对 象 ， 则 需要 使 用 bind 方法 ( 参 








见 事件 处 理 程序 内 的 this 引用 一 节 的 内 容 )。 


专栏 


在 Node.js 中 进行 调试 
我 们 可 以 像 下 面 这 样 ， 以 会 话 的 形式 启动 调试 程序 。 


$ nodqe qdqebug my.]js 
Qebud> 


如 果 读 者 希望 了 解 能 够 在 调试 程序 中 使 用 哪些 指令 , 可 以 通过 键入 help 来 获取 指令 列表 。 在 调试 状态 下 ， 
程序 将 会 在 的 代码 中 写 有 debugger 语句 之 处 中 断 执 行 。ECMAScript 第 5 版 制定 了 debugger 语句 的 标准 ( 
见 本 书 第 2 部 分 )。 
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22.8 | Express 














Express 是 一 种 用 于 Web 应 用 开发 的 MVC 框架 ， 它 基于 同一 作者 所 开发 的 Connect 发 展 而 成 。 可 以 
通过 下 面 的 URL 获取 相关 信息 。 

http://expressjs.com/ 

可 以 像 下 面 这 样 ， 来 安装 Express。 

$ npm install express 

代码 清单 22.23 通过 Express 写 了 一 个 简单 的 Web 应 用 。 通 过 node 指令 执行 该 文件 后 ， 该 应 用 将 会 通 
过 3000 号 端口 等 待 Web 客户 端的 连接 ， 并 在 客户 端 对 其 进行 访问 时 ， 返 回 内 容 为 "Hello World 的 响应 。 


| 代码 清单 22.23 ”Express 的 简单 代码 示例 


















































Var express = require('express'); 
Var app = express.createServer () ; 


app.get ('/', function(req, res) { 
res.send('Hello World'); 
Dg 


appelisten(e oo 

下 面 是 对 代码 清单 22.23 中 要 点 的 说 明 。app.get 中 的 get 与 HTTP 中 的 GET 方法 相对 应 。get 的 第 一 
个 参数 是 %， 它 对 应 于 URL 路 径 。 也 就 是 说 ， 对 于 http:Wlocalhost 这 一 主机 名 为 localhost 的 URL， 它 在 
接收 了 GET 请 求 时 ， 将 调用 该 函数 第 2 个 参数 所 指定 的 回调 函数 。 
回调 函数 将 会 接收 两 个 参数 。 从 代码 清单 22.23 所 使 用 的 参数 名 称 中 也 能 看 出 ， 它 们 分 别 是 表示 请 
求 的 对 象 ， 及 表示 响应 的 对 象 。Express 程序 设计 的 基本 模式 为 ， 首 先 对 请 求 URL 及 其 内 部 回调 函数 的 
对 应 关系 进行 定义 (这 种 对 应 关系 被 称 为 URL 路 由 处 理 或 URL 分 发 处 理 )， 之 后 ， 通 过 回调 函数 获取 请 
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求 信 息 各 处 理 啊 应 。 


国 22.3.1 URL 路 由 | 


如 代码 清单 22.23 中 的 app.get 所 示 ， 在 Express 的 URL 路 由 处 理 过 程 中 ， 将 会 把 URL 路 径 传递 给 
与 HTTP 方法 名 相对 应 的 方法 。 此 外 ， 还 有 app.post、app.put 及 app.del 等 方法 。 其 中 需要 注意 的 是 ， 由 
于 delete 是 JavaScript 中 的 保留 字 ， 因 此 与 HITP 中 的 DELETE 方法 相对 应 的 方法 是 app.del。 而 app.all 
则 能 够 与 所 有 的 HTTP 方法 相 匹配 。 这 时 ， 只 要 URL 路 径 成 功 匹 配 ， 就 能 够 确定 所 对 应 的 回调 函数 。 
我 们 可 以 像 下 面 这样 ， 通 过 形 如 :foo 的 方式 来 描述 URL 路 径 。 在 下 面 的 例子 中 ，/user/suzuki/ 这 样 
的 URL 路 径 将 会 获得 匹配 。 之 后 ， 可 以 通过 req.param.id 这 样 的 形式 来 获取 URL 中 'suzuki' 这 部 分 字符 
串 。 这 种 获取 URL 路 径 中 部 分 元 素 的 方式 ， 在 设计 RESTful 的 URL 时 非常 有 用 。 
app.get ('/user/:id', function(req, res) { 
res.send('user ' + req.paras.id); 
， req.params.id 或 req.param('id') 可 以 表示 URL 字符 串 中 的 一 部 分 ( :ia ) 
De 
此 外 ， 还 有 一 些 其 他 的 URL 路 径 指定 方式 。 可 以 同时 列 出 多 个 :foo 形式 的 元 素 匹 配 ， 也 可 以 在 匹配 
后 添加 ?， 以 :foo? 的 形式 ， 根 据 元 素 是 否 存 在 而 进行 匹配 。 如 果 使 用 *， 则 会 匹配 所 有 人 情况。 
/:foo0/:bar 
/:foo.:bar 
/:foo/:bar? 
/user/* 


我 们 还 可 以 通过 正则 表达 式 来 实现 更 为 复杂 的 URL 路 径 匹 配 。 对 正则 表达 式 的 说 明 在 此 省 略 。 


国 22.8.2 请 求 处 理 


包括 前 一 节 说 明 过 的 URL 路 径 ，Web 应 用 中 请 求 处 理 的 主要 对 象 有 GET 请 求 中 的 查询 参数 ， 及 
POST 请 求 中 的 表单 数据 。 本 节 之 后 将 介绍 获取 这 些 值 的 方法 。 

我 们 可 以 通过 形 如 req.query[foo] 的 方式 来 获取 查询 参数 的 值 。 假 如 请 求 URL 为 http:/ 
localhost:3000/?foo=bar， 则 取得 的 值 是 "bar。 假 如 请 求 URL 如 同 http:/localhost:3000/?3foo=bar&foo=bar2 这 
样 ， 在 查询 参数 中 具有 多 个 不 同 的 值 ，req.query['foo] 则 会 得 到 一 个 数组 ， 其 值 为 [bar, 'bar2']。 

在 通过 POST 方法 发 送 HTML 表单 的 输入 值 之 后 ， 该 值 将 会 由 HTTP 正文 传递 至 Web 应 用 。 我 们 需 
要 在 app.js 中 书写 以 下 代码 ， 以 实现 对 正文 数据 的 分 析 ， 并 将 其 分 解 为 表单 域名 与 域 值 ( 如 果 通 过 之 后 
介绍 的 scaffold 创建 ， 则 会 自动 生成 这 条 代码 )。 


app.use (express.bodyParser ()); 


我 们 可 以 通过 形 如 req.body['foo'] 的 形式 来 获取 表单 内 的 表单 域 值 。 这 里 的 foo 就 代表 表单 域名 。 和 
查询 参数 的 情况 相同 ， 如 果 具 有 多 个 不 同 的 值 ， 则 将 获得 一 个 数组 。 

如 果 像 下 面 这 样 制定 HTML 表单 的 域名 ， 则 能 够 通过 req.body["user] 获取 一 个 形 如 { name: 值 ， 
email: 值 } 的 对 象 。 


<input type="text" name="uset [name]" /> 
<input type="text" name="user[email]" /> 


而 通过 req.param 方法 ， 则 可 以 以 相同 的 方式 ， 获 取 URL 路 径 元 素 、 查 询 参 数 及 表单 数据 等 所 有 内 
容 。 该 方法 可 以 以 req.parem('foo') 的 形式 使 用 。 其 中 ， 第 1 个 参数 所 接收 的 是 URL 路 径 的 匹配 名 称 、 查 询 
参数 名 ， 或 表单 域名 。 如 果 像 req.param('foo', 'defaultvalue) 这 样 ， 指 定 了 它 的 第 2 个 参数 ， 则 会 在 方法 没 
有 返回 值 的 时 候 返 回 该 参数 所 指定 的 默认 值 。 在 本 章 的 最 后 ， 将 会 介绍 一 个 req.param 方法 的 具体 示例 。 
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国 22.8.s 响应 处 理 lL 
表 22.14 列 出 了 一 些 具 有 代表 性 的 Express 响应 处 理 方 法 。 其 中 最 为 重要 的 是 render 方法 。 之 后 的 


























22.8.5 节 将 对 其 进行 说 明 。 
表 22.14 具有 代表 性 的 响应 处 理 方 法 



















































































res.header(key, [val]) 设置 响应 头 部 信息 

res.sendfile(path[, options[, callback]]) 通过 响应 正文 返回 指定 文件 路 径 的 内 容 

res.send(body[, headers[, status]]) 通过 响应 正文 返回 指定 的 字符 串 

res.redirect(urll, status]) 向 指定 URL 返回 一 个 重 定向 响应 

res.render(viewl, options[, fn]]) 将 响应 处 理 转 让 给 指定 的 视图 

国 22.8.4 scaffold 创建 功能 | 





在 Express 中 还 包含 了 express 指令 ， 该 指令 提供 了 scaffold 创建 功能 。 所 谓 scaffold 创建 功能 ， 指 的 
是 通过 1 条 指令 来 创建 应 用 程序 的 框架 文件 。 执 行 下 面 的 指令 之 后 ， 将 会 为 一 个 名 为 myapp 的 应 用 程序 
创建 其 scaffold。 可 以 将 myapp 改写 为 任意 的 应 用 名 称 。 





$ express myapp 


$ cd myapp 
$ npm instal1 -Q 


在 myapp 目录 下 将 会 自动 创建 一 个 app.js 文件 。 可 以 像 下面 这 样 执行 该 文件 。 默 认 情 况 下 ， 这 一 
Web 应 用 将 会 在 3000 号 端口 等 待 连接 。 

















$ nodqe app.js 


国 22.8.5 MVC 架构 | 


通过 scaffold 创建 功能 生成 的 appjs 文件 包含 下 面 这 段 代码 。 这 段 代 码 所 执行 的 功能 是 Express 中 
MVC 架构 的 关键 。 


// app.js 中 的 一 段 代 码 
app.get ('/', function(req, res) { 
res.render('index', { 
title: 'Express'! 
J 
Ds 


res.render 方法 的 第 1 个 参数 是 视图 名 ,第 2 个 参数 是 一 个 将 被 传递 至 视图 的 上 下 文 语 境 对 象 。 根 据 
MVC 中 的 习惯 ， 这 个 被 传递 至 视图 的 上 下 文 语 境 对 象 被 称 为 模型 。 不 过 本 书 将 不 会 使 用 这 一 名 称 ， 而 将 
其 称 为 上 下 文 语 境 对 象 。 视 图 将 会 引用 控制 锅 所 传递 的 上 下 文 语 境 对 象 ， 并 生成 最 终 的 输出 结果 。 这 便 
是 MVC 架构 中 视图 的 功能 。 在 视图 中 ， 通 常 都 会 使 用 模板 语言 ， 下 一 节 将 会 对 其 进行 介绍 。 

国 MVC 中 的 各 部 分 所 承担 的 功能 

在 MVC 中 ,创建 上 下 文 语 境 对 象 并 将 其 传递 给 视图 ， 是 控制 器 的 功能 之 一 。 如 果 将 模型 的 功能 定 
义 为 后 端 人 处理， 控制 器 的 功能 则 可 以 被 定义 为 对 模型 与 视图 的 对 应 关系 的 管理 (关于 模型 ， 有 着 多 种 不 
同 的 定义 方式 ， 这 里 使 用 的 仅 是 其 中 之 一 )。 

在 采用 了 MVC 架构 的 Web 应 用 中 ， 控 制 器 还 具有 其 他 一 些 功 能 。 前 文 介绍 过 的 URL 路 由 功能 正 是 
其 中 之 一 。 控 制 器 的 另 一 个 功能 是 进行 数据 绑 定 处 理 ， 该 处 理 可 以 将 接收 到 的 表单 等 数据 转换 为 内 部 数 
据 。MVC 相关 的 术语 常常 具有 多 种 含义 ， 如 有 兴趣 ， 可 以 参考 其 他 的 书籍 。 
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本 节 之 后 将 继续 介绍 resrender。 在 上 面 的 代码 中 ， 第 1 个 参数 是 一 个 值 为 'index' 的 视图 名 。 该 视图 名 
与 实际 存在 的 文件 相对 应 。 我 们 可 以 在 appjjs 中 添加 下 面 一 段 代 码 ， 以 实现 两 者 的 关联 处 理 。 





app.set('views', dirname + '/views'); 
app.set('view engine', 'jade'); 


在 这 样 设 定之 后 ，'index' 就 会 在 Express 应 用 的 根 目录 (app.js 的 所 在 














目录 ) 中 ， 与 相对 路 径 为 


views/index.jade 的 文件 相关 联 。 上 面 的 res.render 代码 作用 是 将 响应 处 理 委托 给 views/index.jade。 顺 便 一 











提 ， 在 Java Servlet 中 ， 这 种 将 响应 处 理 委托 给 其 他 文件 的 做 法 被 称 为 转发 处 理 。 








在 此 ， 我 们 简单 总 结 一 下 Web 应 用 中 MVC 架构 的 功能 与 相关 执行 方式 。 首 先 ， 控 制 融 将 会 接收 请 
求 。 根 据 URL 路 径 等 信息 ， 控 制 咒 将 会 调用 相应 的 内 部 处 理 模型 。 之 后 ， 将 会 把 模型 的 调用 结果 作为 上 
下 文 语 境 对 象 ， 传 递 给 视图 。 视 图 从 上 下 文 语 境 对 象 中 读 取 所 需 的 值 ， 并 输出 响应 。 























故 22.8.6 模板 语言 Jade 























在 代码 清单 22.23 中 ， 我 们 在 源 代 码 中 以 硬 编码 的 方式 书写 了 响应 字符 串 。 如 果 和 希望 输出 HTML， 则 
必须 对 HTML 字符 串 进行 硬 编 码 。 然 而 ， 如 果 将 这 类 用 于 响应 的 HIML 字符 串 硬 编码 ， 则 会 降低 代码 的 





























可 维护 性 。 如 果 能 将 和 界面 相关 的 代码 ( 视图 层 代 码 ) 与 其 他 部 分 相 分 离 ， 则 全 


E 够 提高 代码 的 可 维护 性 。 














在 开发 Web 应 用 时 ,我们 可 以 在 视图 层 使 用 模板 语言 。 在 模板 语言 的 代码 结构 中 ， 将 以 最 终 输 出 的 








HTML 中 的 不 变 部 分 为 基础 ， 并 在 其 中 藤 入 执行 时 的 可 变 部 分 。 对 于 Java 来 











说 ，JSP 是 最 为 知名 的 模板 














语言 。 而 对 PHP 来 说 ， 其 本 身 就 是 一 种 模板 语言 。 默 认 情 况 下 ，Express 所 使 用 的 模板 语言 是 Jade ( 也 


























可 以 使 用 其 他 的 模板 语言 )。 可 以 从 以 下 URL 中 获取 有 关 Jade 的 相关 信息 。 
http://jade-lang.com/ 

国 Jade 的 规则 
简单 的 Jade 使 用 规则 如 下 所 示 。 
@ 如 果 再 行 首 写 上 标签 ， 该 语句 将 成 为 HTML 元 素 


p 


SP 

















<p></p> 





@ 接 在 标签 之 后 的 字符 串 则 将 成 为 HTML 元 素 的 内 容 。 如 果 该 字符 串 需要 跨越 多 行 ， 可 以 通过 "|" 将 它们 相 


连接 
p 内 容 p 内 容 
-> | abc 
<p> 内 容 </p> | xyz 


<p> 内 容 abcxyz</p> 
@ 如 果 写 的 是 包含 缩 进 的 标签 ， 该 语句 将 会 成 为 能 套 标 签 
p 
span 内 容 


二 


<p><span> 内 容 </span></p> 
@ 而 如 果 使 用 了 冒号 ， 则 可 以 省 略 缩 进 
p: span 内 容 


<p><span> 内 容 </span></p> 
@ 我 们 可 以 以 CSS 选择 器 风格 的 书写 方式 ， 指 定 id 属性 与 class 属性 ( 其 中 ， 


div 属性 可 以 被 省 略 ) 
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P#foo 内 容 pbar 内 容 

ee 这 

<p id="foo"> 内 容 </p> <p class="bar"> 内 容 </p> 
p#foo.bar.baz 内 容 #foo 内 容 

a ee 

<p id="foo" class="bar baz"> 内 容 </p> <div id="foo"> 内 容 </p> 


@ 我 们 可 以 通过 在 标签 名 后 使 用 小 括号 ， 指 定 属性 
a (href='/foo/bar') 内 容 


2 


<a href='/foo/bar'> 内 容 </a> 
@ 如 果 语 句 以 // 开始 ， 则 会 以 HTML 的 风格 将 其 注释 
//p#foo.bar.baz 内 容 


ee 


<!1-- p#foo.bar.baz 内 容 --> 
@ 我 们 可 以 通过 #{ 变量 名 } 的 形式 ， 获 取 JavaScript 中 的 变量 的 值 ( 包括 在 Jada 进行 定义 的 变量 ,或 者 通 
过 res.render 的 第 2 个 参数 所 接收 的 上 下 文 语 境 对 象 的 属性 ) 
假设 JavaScript 中 变量 title 的 值 为 "Express'， 则 有 以 下 结果 


p #{title} 
ee 
<p>Express</p> 


@ 我 们 可 以 通过 "标签 名 = 变量 名 "或 "属性 名 = 变量 名 " 的 形式 ， 获 取 JavaScript 中 的 变量 的 值 ( 还 可 以 
使 用 字符 串 连 接 表 达 式 ) 


B= eel a(lhref = title)= titile 

a 

<p>Express</p> <a href="Express">Express</a> 
a(href = '/' + title)= title 


ee 
<a href="/Express">Express</a> 


@ 如 果 在 行 首 写 有 "~"， 则 能 够 在 之 后 使 用 JavaScript 代码 
- Var foo = 'bar'; // 为 变量 赋值 


form( var key mo 
p = obj [key] 


te eee)) 
ul 
a Ee 
1i 内 容 
- else 
P 内 容 


var Jeems onenve Ewou EnEee 


- each item in items 
en 


国 22.8.7 ”MongoDB ( 数据 库 ) | 


通常 来 说 ， 如 果 Web 应 用 达到 了 某 一 规模 ， 则 需要 在 后 端 使 用 数据 库 。 当 前 , 使 用 MySQL 等 RDBMS 
是 最 为 普遍 的 做 法 。 
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Nodejs 有 多 个 可 以 对 RDBMS 进行 操作 的 包 。 在 执笔 本 书 时 ， 尚 无 某 种 事实 标准 ， 还 不 能 断定 哪 一 
个 包 将 会 成 为 之 后 的 主流 。 因 此 ， 这 里 我 仅 向 读者 介绍 下 面 的 nodejs-db。 

http://nodejsdb.org/ 

本 书 将 不 会 介绍 RDBMS， 而 是 会 对 Node.js 中 MongoDB 的 操作 方法 进行 说 明 。MongoDB 是 一 种 所 
请 的 NoSQL。 下 面 是 MongoDB 官方 站 点 的 URL。 





http://www.mongodb.org/ 
在 Nodejs 中 ， 有 多 个 包 可 以 对 MongoDB 进行 操作 。 关 于 这 些 包 的 信息 ， 请 参见 下 面 的 URL。 
http://docs.mongodb.org/ecosystem/drivers/node-]s pa 


本 书 使 用 了 下 面 站 点 所 提供 的 Mongoose 包 ， 以 实现 在 Nodejs 中 对 MongoDB 进行 操作 。 
http://mongoosejs.com/ 


可 以 像 下 面 这 样 安装 Mongoose。 
$ npm install mongoose 
MongoDB 的 安装 方法 在 此 省 略 。 可 以 向 下 面 这 样 通过 mongod 指令 来 启动 MongoDB。 


$ mkdir data 
$ mongod --dbpath data 


mongod 是 MongoDB 的 服务 器 进程 。 在 MongoDB 中 包含 了 一 个 客户 端 工 具 ， 它 具有 一 个 名 为 
mongo 的 会 话 式 JavaScript 壳 层 。 该 壳 层 还 有 另外 一 个 作用 。 在 启动 了 mongo 指令 后 ， 能 够 方便 地 确认 
MongoDB 的 运行 情况 。 该 方法 的 实质 是 在 Nodejjs 应 用 中 操作 MongoDB 数据 时 ， 通 过 mongo 指令 ， 以 
会 话 的 形式 确认 结果 。 如 果 在 同一 台 PC 上 执行 了 mongo 指令 和 mongod 指令 ， 则 会 在 启动 该 工具 后 自 
动 连接 mongod 服务 器 。 

国 MongoDB 的 概念 

本 书 将 不 会 详细 介绍 MongoDB。 不 过 ， 如 果 大 家 不 了 解 基本 术语 ， 就 无 法 理解 进一步 的 说 明 。 本 节 
对 相关 术语 进行 了 总 结 ( 表 22.15 )。 

可 以 将 MongoDB 直观 地 理解 为 一 种 JavaScript 对 象 的 持久 化 形式 ， 这 种 说 法 虽然 不 严密 ， 但 能 够 
帮助 理解 MongoDB 的 使 用 方式 。 持 久 化 之 后 的 对 象 与 表 22.15 中 的 文档 相对 应 。 对 象 的 属性 对 应 于 其 
中 的 域 。 可 以 通过 了 D 识别 文档 ，ID 会 被 作为 键 来 进行 文档 的 获取 ( 检索 )、 更 新 与 删除 操作 。 这 些 是 
MongoDB 的 基本 功能 。 

不 过 如 果 仅 支持 这 些 功 能 ，MongoDB 也 就 与 KVS ( 键 值 存储 ) 没有 区 别 了 。 在 MongoDB 中 ， 可 以 
通过 域 值 接受 查询 ， 实 现 更 复杂 的 面向 文档 数据 库 操 作 。 与 RDB 形式 的 SQL 相 比 ，MongoDB 中 查询 语 
句 的 表达 能 力 较 弱 ， 但 相应 地 ， 得 益 于 分 布 式 人 处理 ，MongoDB 能 够 发 挥 出 较 高 的 可 扩 放 性 能 。 


表 22.15 ”MongoDB 的 组 成 元 素 








































































































































































































名 称 说 明 

数据 库 聚集 的 容器 

聚集 文档 的 容器 。 相 当 于 RDB 中 的 表 。 在 数据 库 中 通过 唯一 的 名 称 标识 

文档 属性 的 集合 。 在 聚集 内 通过 唯一 的 ID 标识 。 其 内 部 结构 为 BSON ( Binary JSON ) 格式 
域 名 称 与 值 的 配对 。 值 的 类 型 JSON 标准 。 在 文档 内 通过 唯一 的 名 称 标识 





























( 原 书 的 链接 是 较 早 的 版 本 ， 此 处 已 更 新 为 新 版 。 译 者 注 
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国 22.8.8 Mongoose 的 实例 


MongoDB 是 一 种 不 含 架构 的 面向 文档 数据 库 。 在 使 用 MongoDB 时 ， 我 们 无 需 像 使 用 RDB 那样 
现 对 数据 库 表 进行 设计 (对 架构 进行 定义 )。 不 过 习惯 上 ， 在 Mongoose 中 仍 会 书写 架构 定义 。 对 于 这 种 
设计 方式 的 讲 贬 不 一 ， 本 书 不 作 评价 。 

代码 清单 22.24 通过 Mongoose 在 MongoDB 中 新 建 了 一 个 文档 。 前 一 节 也 提 到 过 ， 在 直接 将 
JavaScript 对 象 传递 给 save 方法 之 后 ，MongoDB 将 会 保存 该 对 象 。 而 对 象 的 属性 值 则 会 直接 被 转换 为 
MongoDB 文档 的 域 值 。 


上 代码 清单 22.24 在 MongoDB 中 新 建文 档 
var mongoose = require('mongoose'); 


// mydb 是 数据 库 名 称 ( 可 以 选用 任意 喜欢 的 名 称 ) 


mongoose .connect ('mongodb://localhost/mydb'); 





站 





























Var Schema = mongoose.Schema; 


// 定义 数据 库 架构 

// 'articles' 是 聚集 名 ( 可 以 选用 任意 喜欢 的 名 称 ) 

var Articles = mongoose.model ('articles', new Schema ({ 
Ea Le etme 
dy 2 (Senerers, 
date : { type : Date, default : Date.now } 


} 





Di 
// 新 建文 档 


var obj = new Article(); 
ob el le uellor, 
Sebi body nen od 


// 保存 
obj .save (function(err) { 
if (err) throw err; 


bo 
在 执行 了 代码 清单 22.24 之 后 ， 将 会 显示 如 图 22.2 的 界面 ， 可 以 通过 mongo 的 会 话 式 壳 层 确认 。 在 
MongoDB 中 ， 我 们 不 需要 事先 准备 数据 库 和 聚集 。 如 果 它 们 原本 并 不 存在 ， 则 会 被 自动 创建 。 


22.2 ”通过 mongo 指令 确认 操作 


Testele) 
MongoDB shell version: 1.8.2 
(elo) ehol Teas hole oF 


// 显示 数据 库 一 览 ( 在 执行 代码 清单 22 .24 之 前 ， 仅 存在 admin 与 local 两 个 ) 
> show dbs 

adqmin (empty) 

local (empty) 


// 在 执行 代码 清单 22 .24 之后， 将 会 自动 创建 数据 库 mydb 


> show dbs 

adqmin (empty) 
local (empty) 
LAol oo le: 


// 切换 当前 数据 库 
> Use mydqb 
switch to db mydb 


// 显示 聚集 一 览 ( 在 执行 了 代码 清单 22 .24 之 后 ， 将 会 自动 创建 聚集 articles ) 
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> Show collections 
articles 
SYSstem. inaexes 


// 显示 文档 一 览 ( 在 执行 了 代码 清单 22 .24 之 后 ， 将 自动 创建 一 个 文档 ) 

s db artieles: fingd() 

{ Worse ee loD Ene 20 0 et (ee el 2 Noe ee sul Ueno es 
Jecl Lodo ee uo uel Pod } 








下 面 的 代码 将 通过 Mongoose 来 显示 MongoDB 中 的 文档 一 览 ( 代码 清单 22.25 )。find 方法 的 第 1 个 
参数 将 接收 搜索 条 件 。 如 果 传 递 的 是 { title:'hello' }， 则 将 以 与 其 完全 一 致 为 条 件 来 搜索 域 值 ， 如 果 传 递 的 是 
{title: jh.wW 这 样 的 正则 表达 式 ， 则 将 以 正则 表达 式 匹 配 为 条 件 搜索 。 像 代码 清单 22.25 这 样 传递 空 对 象 的 
话 ， 则 会 返回 聚集 内 的 所 有 文档 。 关 于 其 他 可 用 的 搜索 条 件 的 详细 信息 ， 请 参见 MongoDB 的 参考 文档 。 

find 方法 (依然 ) 是 一 种 异步 API。 它 的 第 2 个 参数 接收 的 是 一 个 回调 函数 。 而 回调 函数 的 第 2 个 
参数 将 会 传递 与 搜索 条 件 相 匹配 的 文档 。MongoDB 文档 基本 上 都 是 通过 这 种 形式 与 JavaScript 对 象 相 关 
联 的 ， 所 传递 的 对 象 将 会 以 数组 的 形式 表示 。 


| 代码 清单 22.25 ”显示 MongoDB 的 文档 一 鉴 















































Var mongoose = require('mongoose'); 
mongoose.connect ('mongodb://localhost/mydb'); 


Var Schema = mongoose.Schema; 
var Article = mongoose.model ('articles', new Schema({ 
ent le tein 
oo SETOSR 
date : { type: Date, default: Date.now } 
}) 
Na 


eonesrinad (function(err goo ( 
docs.forEach (function (doc) 
if (err) throw err; 
console.dir (doc); 
oe 
} 


国 | 22.8.9 使 用 了 Express 与 Mongoose 的 Web 应 用 程序 | 


转 文档 管理 应 用 程序 

在 本 章 的 最 后 ， 我 们 将 会 尝试 编写 一 个 使 用 Express 与 Mongoose 的 Web 应 用 。 不 过 ， 由 于 篇 幅 
所 限 ， 其 结构 将 非常 简单 。 该 Web 应 用 仅 含 有 文档 一 览 及 文档 创建 功能 ， 所 创建 的 文档 将 会 保存 于 
MongoDB 中 。 

首先 需要 像 下 面 这 样 ， 通 过 Express 的 scaffold 创建 功能 来 获取 应 用 的 基本 框架 。 可 以 使 用 任意 的 应 
用 名 称 ( 这 里 使 用 了 myapp )。 


express myapp 
cd myapp 


























npm install -d 
npm fle [elef={S 
mkdir models 





园 创建 模型 

下 面 将 会 在 appjs 的 相对 路 径 models 下 创建 一 个 名 为 articlejjs 的 文件 ( 代码 清单 22.26 )。 它 的 功能 
相当 于 MVC 中 的 模型 。 模 型 所 提供 的 功能 与 Mongoose 所 提供 的 功能 相同 。 如 果 需 要 添加 自 定义 功能 ， 
则 需要 自行 在 Article 类 中 添加 方法 ( 根据 JavaScript 的 习惯 ， 通 常会 添加 至 Article.prototype 中 )。 





























图 灵 社 区 会 员 灯 哥 (xiaoliang3275@163.com) 专 享 尊重 版 权 


第 22 章 Node.js 程 序 设计 实践 





399 ©@ 


| 代码 清单 22.26 models/article.js 


var mongoose = require('mongoose'); 
mongoose.connect ('mongodb://localhost/mydb'); 


Var Schema = mongoose.Schema; 


var Article = mongoose.model ('articles', new Schema({ 
aE ee :Sm 
Body oC 
date : { type: Date, default: Date.now } 
}) 
局 


module.exports = Article; 

为 了 能 在 appjjs 中 使 用 代码 清单 22.26 中 的 article.js 模块 ， 需 要 在 app.js 中 添加 以 下 代码 。 

var Article = require('./models/article'); 

这 样 一 来 ， 就 能 够 在 app.js 中 使 用 Article 对 象 ( Article 类 ) 了 。 
图 提供 文档 一 览 功 能 的 控制 器 

代码 清单 22.27 修改 了 app.js 接收 到 发 送 自 /的 请 求 时 所 执行 的 代码 。 该 URL 将 会 执行 显示 文档 一 
览 的 操作 。 其 基本 运行 结构 依然 是 调用 res.render。 所 使 用 的 Jade 文件 也 仍然 保持 index.jade 即 可 。 不 过 
传递 给 视图 的 上 下 文 语 境 对 象 则 发 生 了 变化 。 在 Jade 文件 中 ， 我 们 可 以 通过 docs 的 名 称 引 用 MongoDB 
的 文档 数组 。 
上 代码 清单 22.27 提供 文档 一 览 功能 的 控制 器 ( appjs ) 


app.get('/', function(req, res) { 
artele nina unectlon(ere docs 
if (err) throw err; 
res renderl( index eee Documenc Nise docs docenl)) 


py 
1 
国 提供 文档 一 览 功能 的 视图 
需要 像 代码 清单 22.28 那样 修改 views/index.jade 文件 ， 以 通过 HTML 表格 来 显示 文档 一 览 。 在 表格 
中 ,包含 了 文档 标题 及 正文 的 表格 列 ， 在 标题 列 中 将 列 出 文档 的 链接 ， 以 供 之 后 的 文档 显示 。 文 档 显 示 
链接 的 路 径 格式 为 v 文档 ID"。 


| 代码 清单 22.28 views/index.jade 









































































































































table (border='1') 
| 
蕊 玫 
LE 
Ea docs ll bo 


园 文档 显示 功能 

在 appjs 中 写 有 控制 器 接收 到 '/ 文档 ID' 路 径 格式 的 请 求 时 的 执行 代码 "。 为 此 我 们 需要 将 代码 清单 
22.29 中 的 内 容 添加 至 app.js 中 。 可 以 通过 req.param(id) 来 获取 请 求 URL 中 路 径 元 素 的 值 ， 将 其 作为 
Mongoose 中 findOne 方法 的 搜索 条 件 。show.jade 文件 在 此 省 略 。 
































该 URL 路 径 也 会 对 /favicon.ico 请 求 进行 相应 ， 对 此 请 加 以 注意 。 
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| 代码 清单 22.29 ”用 于 文档 显示 的 控制 器 ( app.js ) 


app.get('/:id', function(req, res) { 


Article rindone( Nia earparam( a unotion(ere doc 
下 Cer throw er 
res.render('show', { title:'Document', doc: doc }); 
ie 
本 
国 文档 创建 功能 














接 下 来 ， 我 们 将 编写 文档 的 创建 界面 。 这 里 的 请 求 URL 使 用 了 yereate 这 样 一 个 稍 有 些 特 别 的 名 称 
(代码 清单 22.30 )。 由 于 代码 清单 22.29 中 的 :id' 涵盖 了 这 种 情况 ， 因 此 需要 在 它 之 前 书写 下 面 的 代码 “。 
| 代码 清单 22.30 ”用 于 文档 创建 的 控制 器 ( appjs ) 


app.get('/create', function(req, res) { 
res.render('create', { title:'Create' }); 

1 

同时 ， 我 们 需要 像 代码 清单 22.31 这 样 编辑 create.jade 文件 。 在 文件 中 准备 了 用 于 书写 标题 及 正文 的 
域 ， 并 将 POST 目标 的 URL 设 定 为 了 YW'。 由 于 可 以 通过 来 显示 文档 一 览 ， 因 此 可 以 将 该 路 径 视 为 文档 
的 容器 。 对 该 容器 POST 文档 之 后 ， 就 会 创建 一 个 新 的 文档 。 这 也 是 RESTful 风格 URL 设计 模式 的 习惯 
做 法 。 
| 代码 清单 22.31 文档 创建 的 表单 界面 ( views/create.jade ) 



























































form(action = '/', method = 'POST') 
Pp Tlie 
input#title(name = 'title', type = 'text') 
p Body 
textarea#body (name = 'body', cols = '40', rows = '10') 
input#submit (type = 'submit', value = 'Save') 














而 POST 目标 的 控制 器 则 可 以 按 代码 清单 22.32 的 方式 编写 。 对 文档 保存 操作 的 响应 使 | 
理 ， 是 Web 应 用 开发 中 的 标准 做 法 。 


| 代码 清单 22.32 ”用 于 文档 保存 的 控制 器 ( app.js ) 


司机 ie es 
Var doc = new Article(); 
docntitle reo paranm( Cate): 
doc.body = req.param('body'); 
doc.save (function (err) 
TE(ere tneow es, 
res.redirect ('/'); 
}); 
hs 


本 节 介 绍 的 代码 没有 进行 任何 错误 处 理 ， 请 加 以 注意 。 这 里 我 们 试图 以 尽 可 能 短 的 代码 说 明 执行 
方式 。 

为 了 实现 所 谓 的 CRUD ( Create、Read、Update 及 Delete ) 处 理 ， 还 必须 为 应 用 添加 文档 的 更 新 与 删 
除 功能 。 在 本 书 中 将 省 略 这 部 分 内 容 。Mongoose 的 save 方法 可 以 创建 一 个 新 的 文档 并 以 指定 的 文档 _ 
id 属性 值 保存 。 如 果 文 档 已 经 存在 ,会 对 其 进行 更 新 。 删 除 操作 则 可 以 通过 remove 方法 来 实现 。 了 解 了 
这 些 方法 之 后 ， 添 加 新 功能 也 并 非 是 一 件 难事 。 








[hill 





j 重 定向 处 


















































四 这 种 URL 设计 是 存在 问题 的 。 事 实 上 ，URL 设计 是 一 项 困难 的 工作 。 在 如 今 的 Web 应 用 中 ，URL 设计 是 最 为 重要 的 接 
口 设计 ， 因 此 在 实际 的 应 用 开发 中 ， 必 须 愤 之 又 慎 ， 
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在 学 习 IT 新 技术 时 ， 我 往往 会 患得患失 ， 考 虑 投入 与 回报 的 比例 。 我 虽 不 喜欢 这 样 的 自己 ， 但 到 了 
一 定年 龄 之 后 ， 我 确实 无 法 和 否认， 自己 希望 学 习 的 是 投资 回报 率 更 高 的 技术 。 当 然 ， 不 考虑 技术 的 流行 
程度 ， 仅 和 赁 兴趣 学 习 ， 也 并 非 坏 事 。 我 反而 觉得 这 类 人 更 加 值得 尊敬 。 但 我 并 不 强求 所 有 人 在 任何 时 候 
都 必须 持 有 这 种 态度 ， 以 高 涨 的 热情 来 学 习 新 技术 。 


















































倘若 纯粹 考虑 学 习 的 投资 效率 ， 抽 象 度 较 高 的 知识 通常 会 更 有 长 远 价 值 。 如 果 该 技术 与 特定 的 语言 
或 平台 无 关 ， 投 资 效率 也 就 会 更 高 。 然 而 我 认为 ， 技 术 人 员 不 应 该 仅 专注 于 新 知识 的 学 习 。 虽 然 不 必 无 
故 做 出 与 时 代 脱 节 的 姿态 ， 但 还 是 应 该 与 时 代 及 流行 风潮 保持 一 定 的 距离 。 能 够 脱颖而出 成 为 主流 的 技 
术 ， 即 使 其 中 有 偶然 成 分 ， 也 一 定 会 有 其 必然 性 。 不 能 总 是 对 主流 技术 持 以 玻 远 的 态度 ， 在 适当 的 时 候 ， 
b 应 该 遵从 主流 ， 学 习 主 流 技术 。 


























话 虽 如 此 ， 我 长 久 以 来 都 不 太 关心 主流 技术 ， 因 此 这 人 么 说 有 些 底气 不 足 。 








学 习 JavaScript 的 投资 效率 其 实 相 当 不 错 。 这 是 因为 用 不 了 多 和 久 ，JavaScript 可 能 就 会 成 为 互联 网 中 
引领 各 种 技术 发 展 的 标准 语言 。 此 外 ，JavaScript 虽然 是 一 种 主流 的 语言 ， 却 有 不 少 令 人 意外 的 古怪 之 
人 处。 因此， 即使 对 流行 的 Java 语言 不 感 兴趣 ， 也 很 可 能 会 被 JavaScript 所 吸引 。 尽 管 JavaScript 相关 的 技 
术 大 多 很 简陋 ， 但 这 倒 也 是 一 种 独特 的 魅力 。 





























最 后 ， 要 向 给 本 书 提供 了 大 力 支 持 的 内 田 大 需 表 示 感 谢 。 虽 然 无 法 在 本 书 中 完全 体现 出 他 近乎 狂热 
的 挑刺 功力 ， 但 得 益 于 他 的 独到 眼光 ， 本 书 的 内 容 才 能 有 如 此 深度 。 























如 今 ， 开 发 者 能 够 使 用 JavaScript 写 出 各 种 类 型 的 应 用 程序 。 最 初 它 主 要 用 于 增强 浏览 器 的 使 
用 体验 ， 而 现在 ， 服 务 器 端 应 用 (Node.js )、Linux 下 的 GUI 应 用 (Gjs、Gnome Seed )， 甚 至 iPhone 
及 Android 的 应 用 程序 (Titanium Mobile ) 都 可 以 通过 JavaScript 来 实现 。 说 得 夸张 些 ， 只 要 学 会 
JavaScript 程序 设计 ， 就 能 够 在 计算 机 中 实现 任何 希望 实现 的 功能 。JavaScript 给 人 的 印象 已 经 发 生 了 巨 
大 的 变化 ， 它 不 再 是 那 种 仅 被 用 于 禁止 右键 点 击 ， 或 是 在 状态 栏 中 显示 文本 的 简单 语言 。JavaScript 现在 
正 处 于 流行 之 题 。 尽 管 这 门 语言 基于 原型 的 特性 以 及 this 引用 的 用 法 十 分 复杂 ， 仍 然 无 法 阻挡 JavaScript 
的 流行 。 




















































































































JavaScript 是 如 此 流行 ， 让 人 不 禁 觉 得 ， 在 将 来 的 义务 教务 阶段 ， 也 许 会 要 求学 生 们 具备 JavaScript 
的 读 写 能 力 。 继 日 语 、 英 语 之 后 , JavaScript 会 成 为 第 三 种 人 皆 可 读 的 语言 “。 真 是 这 样 的 话 , 未 来 将 会 变 
得 令 人 期 待 。 孩 子 们 将 能 够 使 用 跨 站 点 脚本 语言 ， 在 早晨 通过 类 似 于 alert(Good morning); 的 方式 互相 打 





















































中 ”虽然 程序 设计 语言 会 被 纳入 义务 教育 的 说 法 并 非 第 一 次 出 现 ， 但 目前 来 看 ， 这 样 的 未 来 还 很 适 远 。 





译 者 注 
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后 记 








招呼 。 那 时 ， 要 是 大 人 无 法 回答 孩子 们 关于 JavaScript 的 疑问 ， 可 就 颜面 无 存 了 。 
子 尊敬 的 人 ， 必 须 学 会 JavaScript。 总 之 ， 学 好 JavaScript， 总 是 会 有 些 好 处 的 。 


JavaScript 可 以 说 是 我 最 先 学 会 的 一 门 语言 。 在 当初 加 入 Ariel 公司 时 ， 自 己 














为 了 能 让 自己 成 为 受 防 


土 江 拓 妇 


几乎 什么 都 不 会 。 离 开 


公司 后 不 久 ， 本 书 的 共 著 者 井上 诚 一 郎 对 我 要 求 道 : " 滨 边 ， 你 去 学 习 一 下 Ajax 吧 。” 那 时 候 正 是 Ajax 最 
为 流行 的 时 期 ， 人 们 还 并 不 知道 JavaScript 的 人 气 能 够 维持 至 今 ， 但 仍然 不 减 对 JavaScript 的 热情 。 凭 借 
这 样 的 势头 ，JavaScript 至 今 仍 然 非常 流行 。 现 在 回想 起 来 ， 要 不 是 有 当时 他 的 那 句 话 ， 我 现在 不 可 能 成 
































为 一 个 JavaScripter 吧 。 借 此 机 会 ， 要 向 井上 表达 我 的 谢意 。 

















如 今 ， 仅 和 赁 JavaScript 就 能 实现 大 量 功 能 。 在 Web 应 用 程序 、 原 生 应 用 程序 、 


























智能 手机 及 智能 电视 











应 用 ， 以 及 客户 端 /服务 器 端 程序 中 ， 都 可 以 使 用 JavaScript。 在 这 种 情况 下 ， 要 是 只 对 在 Web 中 搜索 
的 代码 片段 或 是 库 稍 作 修 改 , 插入 自己 的 代码 ， 显 然 是 无 法 适应 如 此 广泛 的 应 用 的 。 对 于 JavaScript 的 














初学 者 来 说 ， 必 须要 以 某 种 方式 来 系统 地 学 习 JavaScript 的 知识 。 如 果 本 书 能 够 
JavaScripter， 我 将 不 胜 琳 幸 。 
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看 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 编辑 或 作 译 者 协助 
答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : ebook@turingbook.com。 
在 这 里 可 以 找到 我 们 : 


微 博 @ 图 灵 教 育 : 好 书 、 活 动 每 日 播报 

微 博 @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 

微 博 @ 图 灵 新 知 : 图 灵 教 育 的 科普 小 组 

微 信 图 灵 访 谈 : ituring_interview， 讲 述 码 农 精彩 人 生 
微 信 图 灵 教 育 : turingbooks 


